/* Transportes Jotaqu — sistema de diseño compartido */
:root{
  --paper:#eeece5;
  --paper-2:#e2ded3;
  --ink:#181a1c;
  --ink-soft:#3a3f45;
  --steel:#5c6670;
  --line:#c9c4b6;
  --amber:#d97f0a;
  --amber-deep:#a35f06;
  --amber-ink:#241600;
  --panel:#ffffff;
  --stripe-a:#d97f0a;
  --stripe-b:#181a1c;
  --ok:#1f7a45;
  --ok-bg:#e6f3ea;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#15171a;
    --paper-2:#1c1f23;
    --ink:#f2efe8;
    --ink-soft:#c7c2b6;
    --steel:#98a2ac;
    --line:#33383e;
    --amber:#f0980f;
    --amber-deep:#c47908;
    --amber-ink:#1a1000;
    --panel:#1c1f23;
    --stripe-a:#f0980f;
    --stripe-b:#0e0f11;
    --ok:#37c473;
    --ok-bg:#123420;
  }
}
:root[data-theme="dark"]{
  --paper:#15171a;
  --paper-2:#1c1f23;
  --ink:#f2efe8;
  --ink-soft:#c7c2b6;
  --steel:#98a2ac;
  --line:#33383e;
  --amber:#f0980f;
  --amber-deep:#c47908;
  --amber-ink:#1a1000;
  --panel:#1c1f23;
  --stripe-a:#f0980f;
  --stripe-b:#0e0f11;
  --ok:#37c473;
  --ok-bg:#123420;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Source Sans 3",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
h1,h2,h3{
  font-family:"Big Shoulders Display",system-ui,sans-serif;
  text-transform:uppercase; letter-spacing:.01em; text-wrap:balance;
  margin:0; font-weight:700;
}
.eyebrow{
  font-family:"Big Shoulders Text",system-ui,sans-serif;
  font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  font-size:.78rem; color:var(--amber);
}
.stripe{
  height:10px;
  background:repeating-linear-gradient(-45deg, var(--stripe-a) 0 18px, var(--stripe-b) 18px 36px);
}
.stripe.thin{height:5px;}

/* ---------- Header ---------- */
header{background:var(--ink); color:var(--paper);}
.nav-row{display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:20px;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.brand img{height:76px; width:auto;}
.brand-name{
  font-family:"Big Shoulders Display",sans-serif; font-weight:800;
  font-size:1.15rem; letter-spacing:.02em; text-transform:uppercase; color:var(--paper);
}
nav.mainnav{display:flex; gap:26px; flex-wrap:wrap;}
nav.mainnav a{
  color:#c9c4b6; text-decoration:none; font-size:.82rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; padding:6px 0; border-bottom:2px solid transparent;
}
nav.mainnav a:hover, nav.mainnav a.active{color:var(--amber); border-color:var(--amber);}
nav.mainnav a.cta{color:var(--amber-ink); background:var(--amber); padding:8px 16px; border-radius:2px; border-bottom:none;}
nav.mainnav a.cta:hover{background:var(--amber-deep); color:var(--amber-ink);}
@media (max-width:860px){ nav.mainnav{display:none;} }

/* ---------- Page header band ---------- */
.page-hero{background:var(--ink); color:var(--paper); padding:56px 0 46px;}
.page-hero h1{font-size:clamp(2.1rem,4.4vw,3rem); color:var(--paper); margin:10px 0 0;}
.page-hero p.lead{color:#c9c4b6; max-width:56ch; margin:16px 0 0; font-size:1rem; line-height:1.6;}

/* ---------- Generic sections ---------- */
section{padding:72px 0;}
.section-head{max-width:680px; margin-bottom:40px;}
.section-head h2{font-size:clamp(1.7rem,3.2vw,2.3rem); margin-top:8px; color:var(--ink);}
.section-head p{color:var(--steel); font-size:1rem; margin:14px 0 0; line-height:1.6;}
.prose{max-width:70ch; color:var(--ink-soft); font-size:1rem; line-height:1.7;}
.prose p{margin:0 0 16px;}
.prose p:last-child{margin-bottom:0;}
.prose strong{color:var(--ink);}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
@media (max-width:760px){.two-col{grid-template-columns:1fr;}}

/* ---------- Cards / grids ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:760px){.grid-3,.grid-2{grid-template-columns:1fr;}}
.card{background:var(--panel); padding:28px 26px;}
.card .ci{font-family:"Big Shoulders Text",sans-serif; font-weight:600; color:var(--amber); font-size:.78rem; letter-spacing:.1em;}
.card h3{font-size:1.15rem; margin:12px 0 10px; color:var(--ink); text-transform:none; letter-spacing:0;}
.card p{color:var(--steel); font-size:.9rem; line-height:1.55; margin:0;}
.card ul{margin:10px 0 0; padding-left:18px; color:var(--steel); font-size:.88rem; line-height:1.7;}

/* ---------- Dark panel section ---------- */
.panel-dark{background:var(--ink); color:var(--paper);}
.panel-dark .section-head h2, .panel-dark .section-head p{color:var(--paper);}
.panel-dark .section-head p{color:#a9a297;}

/* ---------- Stat / gauge blocks ---------- */
.gauge-row{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);}
.gauge{background:var(--ink); padding:32px 28px;}
.gauge .num{font-family:"Big Shoulders Text",monospace; font-variant-numeric:tabular-nums; font-size:3rem; font-weight:600; color:var(--amber); line-height:1;}
.gauge .gtitle{margin:14px 0 8px; font-size:1rem; font-weight:700; color:var(--paper); text-transform:uppercase; letter-spacing:.02em;}
.gauge .gdesc{color:#a9a297; font-size:.88rem; line-height:1.5; margin:0;}
@media (max-width:760px){.gauge-row{grid-template-columns:1fr;}}

/* ---------- Numbered process ---------- */
.process{display:flex; flex-direction:column; gap:0;}
.process-step{display:flex; gap:20px; padding:22px 0; border-bottom:1px solid var(--line);}
.process-step:last-child{border-bottom:none;}
.process-num{
  font-family:"Big Shoulders Display",sans-serif; font-size:2.2rem; font-weight:800; color:var(--amber);
  width:56px; flex-shrink:0; line-height:1;
}
.process-body p{margin:6px 0 0; color:var(--steel); font-size:.92rem; line-height:1.6;}

/* ---------- Testimonials ---------- */
.testi-row{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:760px){.testi-row{grid-template-columns:1fr;}}
.testi{background:var(--panel); padding:26px;}
.testi .stars{color:var(--amber); letter-spacing:.1em; font-size:.85rem;}
.testi h3{font-size:1rem; margin:10px 0 8px; text-transform:none; letter-spacing:0; color:var(--ink);}
.testi p{margin:0; color:var(--steel); font-size:.9rem; line-height:1.55;}
.rating-line{display:flex; align-items:center; gap:10px; margin-bottom:18px; color:var(--ink-soft); font-size:.92rem;}
.rating-line .stars{color:var(--amber); font-size:1rem; letter-spacing:.1em;}

/* ---------- Photo gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.gallery img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:2px;}
@media (max-width:700px){.gallery{grid-template-columns:repeat(2,1fr);}}

/* ---------- Client list ---------- */
.client-list{display:grid; grid-template-columns:repeat(2,1fr); gap:10px 24px; margin:0; padding:0; list-style:none;}
@media (max-width:600px){.client-list{grid-template-columns:1fr;}}
.client-list li{
  padding:12px 0; border-bottom:1px solid var(--line); font-size:.92rem; color:var(--ink-soft); font-weight:600;
}

/* ---------- Trust strip ---------- */
.trust{background:var(--paper-2); border-bottom:1px solid var(--line);}
.trust-row{display:flex; gap:36px; flex-wrap:wrap; padding:20px 0; justify-content:center;}
.trust-item{display:flex; align-items:center; gap:10px; font-size:.9rem; font-weight:600; color:var(--ink-soft);}
.trust-item .mark{
  width:22px; height:22px; border-radius:50%; background:var(--amber); color:var(--amber-ink);
  display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:800; flex-shrink:0;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; text-decoration:none; font-size:.85rem;
  text-transform:uppercase; letter-spacing:.05em; padding:14px 26px; border-radius:2px;
  transition:transform .12s ease, background .15s; border:none; cursor:pointer; font-family:inherit;
}
.btn:hover{transform:translateY(-1px);}
.btn.primary{background:var(--amber); color:var(--amber-ink);}
.btn.primary:hover{background:var(--amber-deep);}
.btn.ghost{border:1.5px solid #4a5057; color:var(--paper); background:transparent;}
.btn.ghost:hover{border-color:var(--amber); color:var(--amber);}
.btn.ghost.on-light{border-color:var(--line); color:var(--ink);}
.btn.ghost.on-light:hover{border-color:var(--amber); color:var(--amber-deep);}
.btn:disabled{opacity:.6; cursor:not-allowed; transform:none;}

/* ---------- CTA band ---------- */
.cta-band{background:var(--amber); color:var(--amber-ink);}
.cta-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:44px 0; flex-wrap:wrap;}
.cta-inner h2{font-size:1.8rem; color:var(--amber-ink);}
.cta-band .btn.primary{background:var(--amber-ink); color:var(--amber);}
.cta-band .btn.primary:hover{background:#000;}

/* ---------- Form ---------- */
.form-card{background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:28px;}
.field{margin-bottom:16px;}
.field label{display:block; margin-bottom:6px; font-size:.82rem; font-weight:600; color:var(--ink);}
.field input, .field textarea{
  width:100%; padding:11px 13px; border-radius:4px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); font-size:.92rem; font-family:inherit;
}
.field textarea{min-height:110px; resize:vertical;}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(217,127,10,.15);}
.contact-info{display:flex; flex-direction:column; gap:18px;}
.contact-info .item{display:flex; gap:14px; align-items:flex-start;}
.contact-info .ic{
  width:38px; height:38px; border-radius:50%; background:var(--amber); color:var(--amber-ink);
  display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; font-size:.85rem;
}
.contact-info .item h3{font-size:.95rem; margin:0 0 4px; text-transform:none; letter-spacing:0; color:var(--ink);}
.contact-info .item p{margin:0; color:var(--steel); font-size:.9rem;}
.quote{border-left:3px solid var(--amber); padding-left:18px; font-size:1.05rem; color:var(--ink-soft); font-style:italic; margin:0 0 24px;}
#formMsg{padding:12px 16px; border-radius:4px; font-size:.88rem; margin-bottom:14px; display:none;}
#formMsg.ok{display:block; background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok);}
#formMsg.err{display:block; background:#fdecea; color:#c0392b; border:1px solid #f0bcb5;}

/* ---------- Footer ---------- */
footer{background:var(--ink); color:#a9a297;}
.footer-inner{display:flex; justify-content:space-between; align-items:center; padding:26px 0; gap:16px; flex-wrap:wrap; font-size:.8rem;}
.footer-inner nav{display:flex; gap:18px; flex-wrap:wrap;}
.footer-inner nav a{color:#a9a297; font-size:.78rem; text-decoration:none;}
.footer-inner nav a:hover{color:var(--amber);}