/* ===========================================================
   Las Granjas Inteligentes de la Canal de Orellana — shared design system
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&family=Noto+Naskh+Arabic:wght@400;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap');

:root{
  --ink:        #16241f;
  --ink-soft:   #2b3b34;
  --spring:     #1c6e62;
  --spring-700: #14514a;
  --spring-100: #dcede8;
  --spring-light: #a9d8cc;
  --wheat:      #d9a438;
  --wheat-100:  #f8ecd2;
  --clay:       #b24a2e;
  --clay-700:   #8f3a24;
  --cream:      #f6f1e4;
  --paper:      #fbf8f0;
  --line:       #d9d2bf;
  --ink-a06: rgba(22,36,31,.06);
  --ink-a12: rgba(22,36,31,.12);
  --ink-a45: rgba(22,36,31,.45);

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, Menlo, monospace;

  --container: 1180px;
  --radius: 4px;
  --radius-lg: 10px;
}

html[lang="ar"]{
  --font-display: 'Noto Naskh Arabic', 'Fraunces', serif;
  --font-body: 'Noto Naskh Arabic', 'Work Sans', sans-serif;
}
html[lang="zh"]{
  --font-display: 'Noto Sans SC', 'Fraunces', sans-serif;
  --font-body: 'Noto Sans SC', 'Work Sans', sans-serif;
}
html[dir="rtl"]{ direction: rtl; }
html[dir="rtl"] .stat-strip{ direction: ltr; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0 0 .5em; line-height:1.15; color:var(--ink); }
p{ margin:0 0 1em; }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }

:focus-visible{ outline:3px solid var(--clay); outline-offset:2px; }

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--spring-700);
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--clay); display:inline-block; }

.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.03em;
  background:var(--wheat-100); color:#6b4a10;
  border:1px solid var(--line);
  border-radius:999px; padding:6px 14px;
}
.badge::before{ content:"●"; font-size:8px; color:var(--clay); }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,248,240,.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--ink-a06);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:76px; }
.brand{ display:flex; flex-direction:column; text-decoration:none; gap:2px; }
.brand-name{ font-family:var(--font-display); font-weight:600; font-size:18px; line-height:1.1; color:var(--ink); }
.brand-tag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--spring-700); text-transform:uppercase; }

.main-nav{
  display:none; flex-direction:column; gap:2px;
  position:absolute; top:100%; left:0; right:0;
  background:var(--paper); border-bottom:1px solid var(--ink-a06);
  padding:10px 24px 18px; box-shadow:0 16px 28px rgba(15,24,20,.10);
  max-height:calc(100vh - 76px); overflow-y:auto;
}
.main-nav.is-open{ display:flex; }
.main-nav a{ text-decoration:none; font-size:15px; font-weight:500; color:var(--ink-soft); position:relative; padding:12px 4px; border-bottom:1px solid var(--ink-a06); }
.main-nav a:last-child{ border-bottom:none; }
.main-nav a:hover, .main-nav a[aria-current="page"]{ color:var(--spring-700); }
.main-nav a[aria-current="page"]::after{ content:""; position:absolute; left:0; bottom:-1px; width:34px; height:2px; background:var(--clay); }

.nav-right{ display:flex; align-items:center; gap:14px; }
.lang-select-wrap{ position:relative; }
.lang-select{
  appearance:none; -webkit-appearance:none;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.03em;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2316241f'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid var(--ink-a12); border-radius:999px;
  padding:9px 34px 9px 16px; color:var(--ink);
  cursor:pointer;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:14.5px;
  padding:12px 22px; border-radius:999px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; transition:transform .15s ease, background .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--clay); color:#fff6ef; }
.btn-primary:hover{ background:var(--clay-700); }
.btn-outline{ background:transparent; border-color:var(--ink-a12); color:var(--ink); }
.btn-outline:hover{ border-color:var(--ink); }
.btn-light{ background:var(--paper); color:var(--ink); }
.btn-sm{ padding:9px 16px; font-size:13.5px; }
.nav-toggle{ display:inline-flex; font-size:18px; line-height:1; padding:9px 14px; }

/* ---------- language auto-detect banner ---------- */
.lang-banner{
  background:var(--spring); color:#eafaf4;
  font-size:13.5px;
}
.lang-banner .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 24px; }
.lang-banner button{
  background:transparent; border:1px solid rgba(255,255,255,.4); color:#eafaf4;
  border-radius:999px; padding:5px 14px; font-size:12.5px; cursor:pointer; font-family:var(--font-body);
  white-space:nowrap;
}
.lang-banner .close-x{ border:none; padding:4px 8px; font-size:15px; opacity:.8; }
.lang-banner[hidden]{ display:none; }

/* ---------- hero ---------- */
.hero{
  position:relative; color:#fdfaf0;
  min-height:640px; display:flex; align-items:center;
  background-size:cover; background-position:center;
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(15,28,24,.35) 0%, rgba(15,28,24,.55) 55%, rgba(13,24,20,.88) 100%);
}
.hero-inner{ position:relative; padding:56px 0; width:100%; }
.hero .eyebrow{ color:var(--spring-light); }
.hero .eyebrow::before{ background:var(--wheat); }
.hero h1{ color:#fdfaf0; font-size:clamp(34px,5vw,58px); max-width:820px; }
.hero p.lede{ font-size:19px; max-width:620px; color:#e9e4d3; margin-bottom:28px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }

.page-hero{ min-height:400px; align-items:flex-end; }
.page-hero .hero-inner{ padding:64px 0 48px; }
.page-hero h1{ font-size:clamp(30px,4.4vw,46px); }

/* ---------- river stat strip (signature motif) ---------- */
.stat-strip{
  background:var(--ink); color:var(--cream);
  padding:34px 0;
}
.stat-strip .strip-label{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--spring-light); margin-bottom:20px;
}
.river-row{ position:relative; display:flex; align-items:center; justify-content:space-between; }
.river-row::before{
  content:""; position:absolute; left:14px; right:14px; top:8px; height:2px;
  background:linear-gradient(90deg, var(--spring-light), var(--wheat));
  opacity:.55;
}
.river-node{ position:relative; flex:1; text-align:center; padding:0 6px; }
.river-node .dot{ width:14px; height:14px; border-radius:50%; background:var(--wheat); border:3px solid var(--ink); margin:0 auto 12px; position:relative; z-index:2; }
.river-node .mw{ font-family:var(--font-mono); font-size:20px; color:#fff; }
.river-node .mw span{ font-size:12px; color:var(--spring-light); }
.river-node .name{ font-size:13px; color:var(--cream); opacity:.85; margin-top:4px; }

/* ---------- sections ---------- */
section{ padding:76px 0; }
.section-alt{ background:var(--cream); }
.section-tight{ padding:48px 0; }
.section-head{ max-width:680px; margin-bottom:40px; }
.section-head h2{ font-size:clamp(26px,3.4vw,38px); }
.section-head p{ font-size:17px; color:var(--ink-soft); }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-2{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column;
}
.card img{ aspect-ratio:4/3; object-fit:cover; width:100%; }
.card-body{ padding:22px 24px 26px; }
.card-body h3{ font-size:19px; margin-bottom:8px; }
.card-body p{ color:var(--ink-soft); font-size:15px; margin-bottom:0; }
.card-tag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--clay); margin-bottom:6px; display:block; }

.figure{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); }
.figure img{ width:100%; }
.figure-cap{ font-size:12.5px; color:var(--ink-a45); font-family:var(--font-mono); margin-top:10px; }
.quote-figure img{ aspect-ratio:3/4; object-fit:cover; height:100%; }

.stat-box{
  background:var(--spring-100); border:1px solid var(--spring-light);
  border-radius:var(--radius-lg); padding:26px 28px;
}
.stat-box .num{ font-family:var(--font-mono); font-size:38px; color:var(--spring-700); line-height:1; }
.stat-box .label{ font-size:14.5px; color:var(--ink-soft); margin-top:8px; }

table.data-table{ width:100%; border-collapse:collapse; font-size:15px; }
.data-table th,.data-table td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); }
.data-table th{ font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-a45); font-weight:500; }
.data-table td.num, .data-table th.num{ text-align:right; font-family:var(--font-mono); }
.data-table tr:last-child td{ font-weight:600; border-bottom:2px solid var(--ink); }

.steps{ counter-reset:step; display:grid; gap:18px; }
.step{ display:flex; gap:16px; }
.step .num-badge{
  counter-increment:step; content:counter(step);
  font-family:var(--font-mono); font-size:13px; color:var(--spring-700);
  width:30px; height:30px; flex:none; border-radius:50%; border:1px solid var(--spring-light);
  display:flex; align-items:center; justify-content:center;
}
.step .num-badge::before{ content:counter(step); }
.step-body h4{ font-size:16px; margin-bottom:4px; }
.step-body p{ color:var(--ink-soft); font-size:14.5px; margin-bottom:0; }

.notice{
  border-left:3px solid var(--clay); background:var(--wheat-100);
  padding:16px 20px; border-radius:0 var(--radius) var(--radius) 0;
  font-size:14.5px; color:#5b4620;
}
.notice p{ margin:0; }
.notice p + p{ margin-top:8px; }

.band-photo{
  position:relative; min-height:340px; background-size:cover; background-position:center;
  display:flex; align-items:center;
}
.band-photo::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(15,24,20,.82) 0%, rgba(15,24,20,.55) 55%, rgba(15,24,20,.15) 100%); }
.band-photo .container{ position:relative; }
.band-photo-inner{ max-width:560px; color:#fdfaf0; }
.band-photo-inner h2{ color:#fdfaf0; }
.band-photo-inner p{ color:#e9e4d3; }

.two-col-list{ columns:2; gap:32px; }
@media (max-width:640px){ .two-col-list{ columns:1; } }

/* ---------- forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:13.5px; font-weight:600; color:var(--ink-soft); }
.field .hint{ font-size:12.5px; color:var(--ink-a45); font-weight:400; }
input,select,textarea{
  font-family:var(--font-body); font-size:15px; color:var(--ink);
  border:1px solid var(--ink-a12); border-radius:var(--radius); background:#fff;
  padding:12px 14px;
}
textarea{ resize:vertical; min-height:120px; }
input:focus,select:focus,textarea:focus{ border-color:var(--spring); }
.checkline{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--ink-soft); }
.checkline input{ margin-top:3px; width:auto; }
.form-msg{ font-size:14.5px; padding:12px 16px; border-radius:var(--radius); display:none; }
.form-msg.show{ display:block; }
.form-msg.ok{ background:var(--spring-100); color:var(--spring-700); }
.form-msg.err{ background:#fbe4de; color:var(--clay-700); }

/* ---------- footer ---------- */
footer{ background:var(--ink); color:var(--cream); padding:56px 0 30px; }
footer a{ text-decoration:none; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:36px; }
footer h4{ color:#fff; font-size:13px; font-family:var(--font-mono); letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; }
footer .brand-name{ color:#fff; }
footer .foot-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
footer .foot-links a{ color:#cfe3dc; font-size:14.5px; }
footer .foot-links a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:22px; font-size:12.5px; color:#9fb3ab; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; gap:28px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .river-row{ flex-wrap:wrap; gap:20px 0; }
  .river-row::before{ display:none; }
  .river-node{ flex:0 0 33%; }
}
@media (max-width:760px){
  .form-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  section{ padding:52px 0; }
  .hero{ min-height:560px; }
}

/* ---------- image lightbox (all pages, via js/main.js) ---------- */
.lightbox-zoomable{ cursor:zoom-in; }
.lightbox-overlay{
  display:none; position:fixed; inset:0; z-index:300;
  background:rgba(12,20,17,.94);
  align-items:center; justify-content:center; padding:56px 24px;
}
.lightbox-overlay.is-open{ display:flex; }
.lightbox-overlay img{
  max-width:92vw; max-height:88vh; border-radius:8px;
  box-shadow:0 24px 70px rgba(0,0,0,.55); cursor:default;
  animation:lightboxIn .18s ease;
}
@keyframes lightboxIn{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:scale(1); } }
.lightbox-close{
  position:fixed; top:20px; right:22px; width:46px; height:46px; z-index:301;
  border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.35);
  color:#fdfaf0; font-size:20px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .15s ease;
}
.lightbox-close:hover{ background:rgba(0,0,0,.6); }
@media (prefers-reduced-motion: reduce){ .lightbox-overlay img{ animation:none; } }

/* ===== v28 navigation / mobile reliability ===== */
.nav-right{flex-shrink:0;min-width:0;}
.lang-select-wrap{flex:0 0 auto;max-width:none!important;}
.lang-select{min-width:126px;width:auto;max-width:none;white-space:nowrap;text-overflow:clip;overflow:visible;}
@media (max-width:900px){
  .site-header .container{padding-left:12px!important;padding-right:12px!important;gap:8px!important;min-height:64px!important;}
  .site-header .brand{min-width:0!important;flex:1 1 auto!important;overflow:hidden!important;}
  .site-header .brand-name,.site-header .brand-tag{white-space:nowrap!important;word-break:normal!important;hyphens:none!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .site-header .nav-right{gap:7px!important;flex:0 0 auto!important;}
  .site-header .nav-right>a.btn{display:none!important;}
  .site-header .lang-select-wrap{width:auto!important;min-width:0!important;max-width:none!important;}
  .site-header .lang-select{width:148px!important;min-width:148px!important;max-width:none!important;font-size:12px!important;padding:9px 29px 9px 12px!important;}
  .site-header .nav-toggle{display:inline-flex!important;min-width:42px!important;width:42px!important;height:40px!important;padding:0!important;align-items:center!important;justify-content:center!important;flex:0 0 42px!important;}
  .site-header .main-nav{z-index:10020!important;max-height:calc(100dvh - 64px)!important;overflow-y:auto!important;overscroll-behavior:contain!important;}
  .site-header .main-nav.is-open{display:flex!important;}
}
@media (max-width:520px){
  .site-header .brand-tag{display:none!important;}
  .site-header .brand-name{font-size:13px!important;}
  .site-header .lang-select{width:144px!important;min-width:144px!important;font-size:11.5px!important;}
}
@media (max-width:380px){
  .site-header .brand-name{font-size:12px!important;}
  .site-header .lang-select{width:138px!important;min-width:138px!important;padding-left:9px!important;}
  .site-header .nav-right{gap:5px!important;}
}

/* v29: mobile language names stay fully visible; hamburger menu remains scrollable. */
@media(max-width:900px){.site-header .lang-select-wrap{overflow:visible!important}.site-header .lang-select{text-overflow:clip!important;white-space:nowrap!important}.site-header .main-nav{-webkit-overflow-scrolling:touch!important;}}

/* ===== v36 global overflow / restoration page fixes ===== */
html, body { max-width: 100%; }
@media (max-width: 900px) {
  html, body { overflow-x: hidden !important; }
  body > *, section, header, footer, .container, .grid-2, .grid-3, .figure, .notice, .card, .data-table {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  img, iframe, video, canvas, svg { max-width: 100% !important; }
  .site-header .main-nav { width: min(100%, 420px) !important; }
}

/* ===== v41 header containment =====
   .site-header .container carried a fixed height:76px. When the brand block,
   language selector and toggle together exceed that, the content overflows the
   header box and paints over the hero image below. Height is now driven by the
   content, and the brand tag / call-to-action are withdrawn on narrow screens
   before they can cause the overflow. */
.site-header .container{ height:auto; min-height:76px; flex-wrap:nowrap; }
@media (max-width:900px){
  .site-header .container{
    height:auto !important;
    min-height:64px !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
  }
  .site-header{ overflow:visible; }
  .site-header .brand-tag{ display:none !important; }
  .site-header .nav-right > a.btn{ display:none !important; }
  .site-header .brand-name{ line-height:1.15 !important; }
  .site-header .main-nav{ max-height:calc(100dvh - 64px) !important; }
}
/* V61.21 social footer */
.jd-social-footer{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:0;border:0;vertical-align:middle;white-space:nowrap}
.jd-social-link{width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center;color:inherit;background:transparent;border:0;border-radius:0;text-decoration:none;transition:opacity .18s ease,transform .18s ease;vertical-align:middle;line-height:1}
.jd-social-link:hover,.jd-social-link:focus-visible{transform:translateY(-1px);opacity:.72;outline:none;background:transparent;border:0}
.jd-social-link svg{width:14px;height:14px;display:block;fill:currentColor}
.jd-social-link .jd-x-mark{fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round}


/* V61.25 footer social + email controls */
.jd-social-inline{display:inline-flex!important;align-items:center!important;gap:9px!important;vertical-align:middle!important;white-space:nowrap!important;line-height:1!important}
.jd-social-inline a{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important;margin:0!important;text-decoration:none!important}
.jd-social-inline img{display:block!important;object-fit:contain!important;margin:0!important;padding:0!important;border:0!important}

/* V61.24 mobile control hardening */
.btn{max-width:100%;}
@media(max-width:640px){
  .btn{white-space:normal;text-align:center;line-height:1.25;overflow-wrap:anywhere;}
  .lang-banner .container{flex-wrap:wrap;}
  .lang-banner button{white-space:normal;max-width:100%;}
  .download-card{overflow-wrap:anywhere;}
}
@media(max-width:360px){
  .site-header .lang-select{width:120px!important;min-width:120px!important;padding-right:25px!important;}
  .site-header .nav-toggle{min-width:40px!important;width:40px!important;flex-basis:40px!important;}
}

/* V61.25 accessibility sizing for footer social controls */
.jd-social-inline a{min-width:34px!important;min-height:34px!important}
@media(max-width:520px){.jd-footer-right-wrap{row-gap:9px!important}.jd-social-inline{margin-left:0!important}}