/* Reforsolo · Carta Geotécnica do DF
   Shared system for index.html and cursos.html */

:root{
  --paper:#edf0eb; --paper2:#e1e7e1; --rule:#0b1510; --hair:rgba(11,21,16,.18);
  --ink:#0b1510; --ink2:#3b4a41; --ink3:#5a6a60;
  /* Reforsolo brand: forest greens + amber */
  --forest:#0b1510; --forest2:#10201a; --forest3:#152a1f; --moss:#244232; --leaf:#6fbf8a; --amber-b:#e0a35a; --amber-b2:#c98a3e;
  /* map units */
  --aterro:#cdbf8f; --aterro-h:#a8996a;
  --argila:#a63b24; --argila-h:#86301b;
  --silte:#d8923b; --silte-h:#b9762a;
  --sapro:#744d59; --sapro-h:#5f3f49;
  --rocha:#3e4146; --rocha-h:#2f3236;
  --cambi:#8f8f58; --agua:#2e6aa3; --agua-l:#9cc0e0;
  --wa:#25d366;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gutter:clamp(16px,4vw,56px);
  --max:1360px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:var(--amber-b);color:var(--forest)}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
img,svg,video{display:block;max-width:100%}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--amber-b2);outline-offset:3px}
.on-dark :focus-visible{outline-color:#fff}
.tab{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* scrollbar */
html{scrollbar-color:var(--moss) var(--paper2)}
::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--paper2)}::-webkit-scrollbar-thumb{background:var(--moss);border:3px solid var(--paper2)}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}

/* type */
.display{font-variation-settings:"wdth" 118;font-weight:850;letter-spacing:-.03em;line-height:.94}
.h2{font-size:clamp(36px,5.2vw,76px);font-variation-settings:"wdth" 112;font-weight:800;letter-spacing:-.025em;line-height:.98}
.h3{font-size:clamp(20px,1.7vw,24px);font-weight:700;letter-spacing:-.01em;line-height:1.15}
.lead{font-size:clamp(18px,1.45vw,21px);line-height:1.5;max-width:58ch;color:var(--ink2)}
.cond{font-variation-settings:"wdth" 78}
.caps{text-transform:uppercase;letter-spacing:.08em;font-variation-settings:"wdth" 78;font-weight:600;font-size:12px}
.hydro{font-style:italic;color:var(--agua)}
.small{font-size:14px;line-height:1.45}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 22px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);font-weight:650;font-size:16px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,transform .15s}
.btn svg{width:20px;height:20px;flex:none}
.btn .g{color:var(--wa)}
.btn:hover{background:var(--forest3)}
.btn-amber{background:var(--amber-b);border-color:var(--amber-b);color:var(--forest)}
.btn-amber .g{color:var(--forest)}
.btn-amber:hover{background:#ebb575;border-color:#ebb575}
.btn:active{transform:translateY(1px)}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.on-dark .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.on-dark .btn:hover{background:#fff}
.on-dark .btn-line{background:transparent;color:var(--paper)}
.on-dark .btn-line:hover{background:var(--paper);color:var(--ink)}
.btn .arr{width:18px;height:18px;transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.link{font-weight:650;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.22em;display:inline-flex;align-items:center;gap:8px}
.link:hover{text-decoration-thickness:3px}

/* sheet top bar (map margin) */
.bar{position:sticky;top:0;z-index:40;background:var(--forest);color:#eef3ee;border-bottom:1px solid var(--forest)}
/* sheet margin: UTM ticks along the bar's lower edge */
.bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,var(--amber-b2) 0 1px,transparent 1px 120px),repeating-linear-gradient(90deg,rgba(201,138,62,.6) 0 1px,transparent 1px 24px);
  background-size:100% 7px,100% 3px;background-position:var(--gutter) 0,var(--gutter) 4px;background-repeat:repeat-x}
.bar::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;pointer-events:none;background-image:repeating-linear-gradient(90deg,var(--amber-b2) 0 1px,transparent 1px 120px);background-position:var(--gutter) 0}
.bar .wrap{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand svg{width:34px;height:22px}
.brand b{font-weight:800;font-size:19px;letter-spacing:-.01em;font-variation-settings:"wdth" 115}
.brand small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-b);font-variation-settings:"wdth" 100;font-weight:500;margin-top:-1px}
.bar nav{display:flex;gap:26px;margin-left:auto}
.bar nav a{text-decoration:none;font-weight:550;font-size:15px;padding:6px 0;border-bottom:1.5px solid transparent}
.bar nav a:hover,.bar nav a[aria-current]{border-bottom-color:var(--amber-b)}
.bar .btn{min-height:42px;padding:0 16px;font-size:15px;background:var(--amber-b);border-color:var(--amber-b);color:var(--forest)}
.bar .btn .g{color:var(--forest)}
.bar .btn:hover{background:#ebb575}
.menu-btn{display:none;background:none;color:#eef3ee;border:1.5px solid rgba(238,243,238,.6);height:42px;padding:0 14px;font-weight:650;cursor:pointer;align-items:center;gap:10px}
.menu-btn i{width:16px;height:8px;border-block:1.5px solid currentColor;display:block}
.menu{position:fixed;inset:64px 0 0;z-index:39;background:var(--paper);padding:24px var(--gutter);display:none;flex-direction:column;gap:4px;overflow:auto}
.menu a{font-size:30px;font-weight:800;font-variation-settings:"wdth" 112;text-decoration:none;padding:10px 0;border-bottom:1px solid var(--hair);display:flex;align-items:center;gap:14px}
.menu a i{width:18px;height:18px;flex:none}
.menu .btn{margin-top:20px;font-size:17px;justify-content:center}
body.menu-open .menu{display:flex}
@media (max-width:900px){
  .bar nav{display:none}
  .menu-btn{display:inline-flex;margin-left:auto}
  .bar .btn span{display:none}
  .bar .btn{padding:0 12px}
  .bar .wrap{gap:12px}
}
@media (max-width:420px){.brand small{display:none}.brand b{font-size:18px}}

/* unit swatch + hatching */
.sw{display:inline-block;width:22px;height:14px;border:1px solid var(--ink);flex:none;vertical-align:-2px}
.u-aterro{--u:var(--aterro);--h:var(--aterro-h)}
.u-argila{--u:var(--argila);--h:var(--argila-h)}
.u-silte{--u:var(--silte);--h:var(--silte-h)}
.u-sapro{--u:var(--sapro);--h:var(--sapro-h)}
.u-rocha{--u:var(--rocha);--h:var(--rocha-h)}
.hatch-dots{background-color:var(--u);background-image:radial-gradient(var(--h) 1.2px,transparent 1.6px);background-size:9px 9px}
.hatch-dash{background-color:var(--u);background-image:repeating-linear-gradient(0deg,transparent 0 7px,var(--h) 7px 8.5px),repeating-linear-gradient(90deg,var(--u) 0 10px,transparent 10px 14px);background-blend-mode:normal}
.hatch-clay{background-color:var(--u);background-image:repeating-linear-gradient(0deg,transparent 0 8px,var(--h) 8px 9.5px)}
.hatch-silt{background-color:var(--u);background-image:radial-gradient(var(--h) 1px,transparent 1.4px),repeating-linear-gradient(0deg,transparent 0 10px,var(--h) 10px 11.2px);background-size:7px 7px,auto}
.hatch-sapro{background-color:var(--u);background-image:repeating-linear-gradient(45deg,transparent 0 9px,var(--h) 9px 10.5px)}
.hatch-rock{background-color:var(--u);background-image:repeating-linear-gradient(45deg,transparent 0 11px,var(--h) 11px 12.5px),repeating-linear-gradient(-45deg,transparent 0 11px,var(--h) 11px 12.5px)}

/* footer: sheet margin */
.foot{background:var(--forest);color:#eef3ee;padding-block:32px 44px}
.foot .brand small{color:var(--amber-b)}
.foot .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:28px 48px;align-items:end}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:15px}
.foot nav a{text-decoration:none}.foot nav a:hover{text-decoration:underline}
.scale{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#a9b8ad}
.scale i{display:flex;height:8px;width:180px;border:1px solid var(--amber-b2)}
.scale i b{flex:1}.scale i b:nth-child(odd){background:var(--amber-b2)}
.foot .meta{font-size:13px;color:#a9b8ad;text-align:right}
@media (max-width:800px){.foot .wrap{grid-template-columns:1fr}.foot .meta{text-align:left}}

/* floating WhatsApp */
.fab{position:fixed;right:18px;bottom:18px;z-index:30;width:56px;height:56px;display:grid;place-items:center;background:var(--forest);color:var(--wa);border:1.5px solid var(--amber-b2)}
.fab svg{width:26px;height:26px}
.fab:hover{background:var(--forest3)}
@media (max-width:480px){.btn{white-space:normal;text-align:left;line-height:1.2;padding-block:10px}}

@media (max-width:640px){.foot{padding-bottom:96px}}