/* ==========================================================================
   CARGOMUNDI — Despachante Aduaneiro & Logística
   ========================================================================== */

:root{
  --navy-900:#0B2338;
  --navy-800:#123049;
  --navy-700:#1B4160;
  --navy-600:#2a4a63;

  --brass-500:#B8863B;
  --brass-400:#C79A52;
  --brass-300:#D9B876;

  --paper-50:#FBF9F4;
  --paper-100:#F4F1E9;
  --paper-200:#E9E3D3;

  --ink-900:#16232C;
  --ink-700:#3B4A54;
  --ink-500:#5A6B78;

  --red-600:#A63D2C;

  --font-display:'Fraunces', serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --max-w:1180px;
  --radius-sm:4px;
}

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

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

img{ max-width:100%; display:block; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.15;
  margin:0 0 0.5em;
  color:var(--navy-900);
}

h2{ font-size:clamp(1.75rem, 1.4rem + 1.6vw, 2.6rem); }
h3{ font-size:clamp(1.15rem, 1rem + 0.6vw, 1.4rem); }

p{ margin:0 0 1em; max-width:64ch; }
a{ color:inherit; }

.container{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 24px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--brass-500);
  outline-offset:2px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 24px;
  border-radius:var(--radius-sm);
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.95rem;
  text-decoration:none;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active{ transform:translateY(1px); }

.btn-primary{
  background:var(--brass-500);
  color:var(--navy-900);
}
.btn-primary:hover{ background:var(--brass-300); }

.btn-ghost-light{
  border-color:rgba(244,241,233,0.4);
  color:var(--paper-100);
}
.btn-ghost-light:hover{ border-color:var(--brass-300); color:var(--brass-300); }

.btn-ghost-dark{
  border-color:var(--navy-700);
  color:var(--navy-900);
}
.btn-ghost-dark:hover{ border-color:var(--brass-500); color:var(--brass-500); }

/* ---------- Utility bar ---------- */
.utility-bar{
  background:var(--navy-800);
  color:var(--paper-200,#E9E3D3);
  font-family:var(--font-mono);
  font-size:0.78rem;
}
.utility-bar .container{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:34px;
  overflow-x:auto;
  white-space:nowrap;
}
.utility-bar a{ color:var(--paper-200,#E9E3D3); text-decoration:none; opacity:0.9; }
.utility-bar a:hover{ color:var(--brass-300); }
.utility-bar .sep{ opacity:0.4; }

/* ---------- Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(11,35,56,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(217,184,118,0.18);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:76px;
  gap:24px;
}
.site-header .logo img{ height:34px; width:auto; }
.site-header .logo{ display:flex; align-items:center; }

.main-nav{ display:flex; align-items:center; gap:28px; }
.main-nav a{
  color:var(--paper-100);
  text-decoration:none;
  font-size:0.95rem;
  font-weight:500;
  opacity:0.85;
}
.main-nav a:hover{ opacity:1; color:var(--brass-300); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.header-actions .phone-link{
  color:var(--paper-100);
  text-decoration:none;
  font-family:var(--font-mono);
  font-size:0.9rem;
  opacity:0.85;
  display:none;
}
.header-actions .phone-link:hover{ opacity:1; }

.nav-toggle{
  display:none;
  background:none;
  border:1.5px solid rgba(217,184,118,0.5);
  border-radius:var(--radius-sm);
  width:42px;
  height:38px;
  color:var(--paper-100);
  font-size:1.2rem;
  cursor:pointer;
}

@media (min-width: 860px){
  .header-actions .phone-link{ display:inline-flex; }
}

@media (max-width: 940px){
  .main-nav{
    position:absolute;
    top:76px;
    left:0;
    right:0;
    background:var(--navy-900);
    flex-direction:column;
    align-items:flex-start;
    padding:8px 24px 20px;
    gap:16px;
    border-bottom:1px solid rgba(217,184,118,0.18);
    display:none;
  }
  .main-nav.is-open{ display:flex; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
}

/* ---------- Route marker (structural device tied to shipping-route theme) ---------- */
.route-marker{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:28px;
  max-width:220px;
}
.route-marker .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--brass-500);
  flex-shrink:0;
  box-shadow:0 0 0 4px rgba(184,134,59,0.15);
}
.route-marker .line{
  height:1px;
  flex:1;
  background:linear-gradient(to right, rgba(184,134,59,0.6), transparent);
}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(ellipse at 80% 0%, rgba(184,134,59,0.10), transparent 55%),
    linear-gradient(180deg, var(--navy-900), var(--navy-800));
  color:var(--paper-100);
  padding:72px 0 0;
  overflow:hidden;
  border-bottom:1px solid rgba(217,184,118,0.15);
}
.hero .container{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:40px;
  align-items:center;
}
.hero-copy .eyebrow-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:0.82rem;
  color:var(--brass-300);
  border:1px solid rgba(217,184,118,0.4);
  padding:6px 12px;
  border-radius:999px;
  margin-bottom:22px;
}
.hero-copy h1{
  color:var(--paper-50);
  font-size:clamp(2.2rem, 1.7rem + 2.4vw, 3.4rem);
  max-width:14ch;
}
.hero-copy .lede{
  color:var(--paper-200,#E9E3D3);
  font-size:1.1rem;
  max-width:46ch;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:30px 0 40px;
}
.hero-credentials{
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  padding-top:28px;
  border-top:1px solid rgba(217,184,118,0.2);
}
.hero-credentials .item{ max-width:200px; }
.hero-credentials .item strong{
  display:block;
  font-family:var(--font-display);
  color:var(--brass-300);
  font-size:1.5rem;
}
.hero-credentials .item span{
  font-size:0.85rem;
  color:var(--paper-200,#E9E3D3);
  opacity:0.85;
}
.hero-art{ align-self:end; }
.hero-art img{ width:100%; height:auto; }

@media (max-width: 860px){
  .hero .container{ grid-template-columns:1fr; }
  .hero-art{ order:-1; max-width:420px; margin:0 auto; }
}

/* ---------- Section scaffolding ---------- */
section{ padding:88px 0; }
.section-light{ background:var(--paper-50); }
.section-paper{ background:var(--paper-100); }
.section-navy{
  background:linear-gradient(180deg, var(--navy-900), var(--navy-800));
  color:var(--paper-100);
}
.section-navy h2{ color:var(--paper-50); }
.section-navy p{ color:var(--paper-200,#E9E3D3); }

.section-head{
  max-width:640px;
  margin-bottom:48px;
}

/* ---------- Sobre (Quem somos) ---------- */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
}
.about-lede p{ font-size:1.08rem; color:var(--ink-700); max-width:52ch; }
.pillars{ display:grid; gap:28px; }
.pillar{
  border-left:2px solid var(--brass-500);
  padding-left:22px;
}
.pillar h3{ margin-bottom:8px; }
.pillar p{ color:var(--ink-700); font-size:0.98rem; margin-bottom:0; }

@media (max-width:800px){
  .about-grid{ grid-template-columns:1fr; }
}

/* ---------- Área de atuação (map) ---------- */
.area-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:56px;
  align-items:center;
}
.area-copy p{ color:var(--ink-700); }
.area-list{
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:grid;
  gap:14px;
}
.area-list li{
  display:flex;
  gap:12px;
  font-size:0.95rem;
  color:var(--ink-700);
}
.area-list li::before{
  content:'';
  width:6px;
  height:6px;
  margin-top:8px;
  background:var(--brass-500);
  flex-shrink:0;
  border-radius:50%;
}
.area-art{
  background:var(--paper-100);
  border:1px solid var(--paper-200);
  border-radius:var(--radius-sm);
  padding:24px;
}

@media (max-width:900px){
  .area-grid{ grid-template-columns:1fr; }
}

/* ---------- Serviços (accordion / manifest style) ---------- */
.services-tabs{ display:grid; gap:20px; }
.service-panel{
  border:1px solid var(--paper-200);
  background:var(--paper-50);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.service-panel > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:24px 26px;
  font-family:var(--font-display);
  font-size:1.3rem;
  font-weight:600;
  color:var(--navy-900);
}
.service-panel > summary::-webkit-details-marker{ display:none; }
.service-panel > summary .tag{
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--ink-500);
  font-weight:400;
}
.service-panel > summary .plus{
  font-size:1.4rem;
  color:var(--brass-500);
  transition:transform .2s ease;
  flex-shrink:0;
}
.service-panel[open] > summary .plus{ transform:rotate(45deg); }

.service-panel .panel-body{
  padding:0 26px 30px;
  border-top:1px solid var(--paper-200);
}
.service-panel .panel-intro{
  color:var(--ink-700);
  padding-top:20px;
  max-width:60ch;
}
.manifest-list{
  list-style:none;
  margin:8px 0 0;
  padding:0;
  columns:2;
  column-gap:32px;
}
.manifest-list li{
  break-inside:avoid;
  display:flex;
  gap:10px;
  padding:9px 0;
  border-bottom:1px dashed var(--paper-200);
  font-size:0.92rem;
  color:var(--ink-700);
}
.manifest-list li .idx{
  font-family:var(--font-mono);
  color:var(--brass-500);
  font-size:0.78rem;
  flex-shrink:0;
  padding-top:2px;
}

@media (max-width:640px){
  .manifest-list{ columns:1; }
  .service-panel > summary{ font-size:1.1rem; padding:18px 18px; }
  .service-panel .panel-body{ padding:0 18px 22px; }
}

/* ---------- Cabotagem ---------- */
.cabotagem-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}
.cabotagem-copy p{ color:var(--paper-200,#E9E3D3); }
.cabotagem-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:16px;
}
.cabotagem-list li{
  display:flex;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid rgba(217,184,118,0.15);
  font-size:0.95rem;
  color:var(--paper-200,#E9E3D3);
}
.cabotagem-list li .idx{
  font-family:var(--font-mono);
  color:var(--brass-300);
  flex-shrink:0;
}

@media (max-width:860px){
  .cabotagem-grid{ grid-template-columns:1fr; }
}

/* ---------- Insight / editorial note ---------- */
.insight{
  display:grid;
  grid-template-columns:0.7fr 1.3fr;
  gap:48px;
}
.insight-figure strong{
  font-family:var(--font-display);
  font-size:3rem;
  color:var(--brass-500);
  display:block;
  line-height:1;
}
.insight-figure span{
  color:var(--ink-500);
  font-size:0.95rem;
}
.insight-body p{ color:var(--ink-700); max-width:62ch; }

@media (max-width:820px){
  .insight{ grid-template-columns:1fr; gap:20px; }
}

/* ---------- CTA / Contato ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
}
.contact-info-list{
  list-style:none;
  margin:28px 0 0;
  padding:0;
  display:grid;
  gap:22px;
}
.contact-info-list li{ display:flex; gap:14px; align-items:flex-start; }
.contact-info-list .ico{
  width:34px;
  height:34px;
  border:1.5px solid var(--brass-500);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--brass-500);
  flex-shrink:0;
  font-size:0.95rem;
}
.contact-info-list a{ color:var(--paper-50); text-decoration:none; }
.contact-info-list a:hover{ color:var(--brass-300); }
.contact-info-list .label{
  display:block;
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--brass-300);
  margin-bottom:2px;
}

.contact-form{
  background:var(--paper-50);
  color:var(--ink-900);
  border-radius:var(--radius-sm);
  padding:32px;
  display:grid;
  gap:16px;
}
.contact-form label{
  font-size:0.85rem;
  font-weight:600;
  display:block;
  margin-bottom:6px;
  color:var(--ink-900);
}
.contact-form input,
.contact-form textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:0.95rem;
  padding:12px 14px;
  border:1.5px solid var(--paper-200);
  border-radius:var(--radius-sm);
  background:var(--paper-100);
  color:var(--ink-900);
}
.contact-form input:focus,
.contact-form textarea:focus{ border-color:var(--brass-500); outline:none; }
.contact-form textarea{ min-height:120px; resize:vertical; }
.contact-form .form-note{
  font-size:0.8rem;
  color:var(--ink-500);
  margin:0;
}
.form-status{ font-size:0.9rem; font-weight:600; min-height:1.2em; }
.form-status[data-state="success"]{ color:#3a7a3a; }
.form-status[data-state="error"]{ color:var(--red-600); }

@media (max-width:860px){
  .contact-grid{ grid-template-columns:1fr; }
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--navy-900);
  color:var(--paper-200,#E9E3D3);
  padding:56px 0 28px;
  border-top:1px solid rgba(217,184,118,0.15);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:40px;
  padding-bottom:36px;
}
.footer-grid .logo img{ height:30px; margin-bottom:14px; }
.footer-grid p{ font-size:0.9rem; opacity:0.8; }
.footer-col h4{
  color:var(--paper-50);
  font-size:0.95rem;
  font-family:var(--font-body);
  font-weight:700;
  margin-bottom:14px;
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.footer-col a{
  color:var(--paper-200,#E9E3D3);
  text-decoration:none;
  font-size:0.9rem;
  opacity:0.85;
}
.footer-col a:hover{ opacity:1; color:var(--brass-300); }
.footer-bottom{
  border-top:1px solid rgba(217,184,118,0.15);
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  font-size:0.82rem;
  opacity:0.7;
}

@media (max-width:760px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* ---------- CTA band (faixa de chamada, meio da página) ---------- */
.cta-band{
  background:linear-gradient(120deg, var(--navy-800), var(--navy-900) 70%);
  color:var(--paper-50);
  padding:64px 0;
  position:relative;
  overflow:hidden;
}
.cta-band::before{
  content:'';
  position:absolute;
  right:-60px;
  top:-60px;
  width:260px;
  height:260px;
  border:1px solid rgba(217,184,118,0.18);
  border-radius:50%;
}
.cta-band .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
  position:relative;
}
.cta-band h2{
  color:var(--paper-50);
  max-width:20ch;
  margin:0;
  font-size:clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
}
.cta-band p{
  color:var(--paper-200,#E9E3D3);
  margin:10px 0 0;
  max-width:44ch;
}
.cta-band .cta-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- Service teaser cards ---------- */
.service-teasers{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  margin-bottom:40px;
}
.teaser-card{
  background:var(--paper-50);
  border:1px solid var(--paper-200);
  border-radius:var(--radius-sm);
  padding:26px 24px;
  text-align:left;
  cursor:pointer;
  transition:border-color .15s ease;
  font-family:inherit;
}
.teaser-card:hover{ border-color:var(--brass-500); }
.teaser-card .glyph{
  width:40px;
  height:40px;
  border:1.5px solid var(--brass-500);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--brass-500);
  font-family:var(--font-display);
  font-size:1.1rem;
  margin-bottom:16px;
}
.teaser-card h4{
  font-family:var(--font-display);
  font-size:1.1rem;
  color:var(--navy-900);
  margin:0 0 8px;
}
.teaser-card p{
  font-size:0.9rem;
  color:var(--ink-700);
  margin:0;
}
.teaser-card .link{
  display:inline-block;
  margin-top:12px;
  font-size:0.85rem;
  font-weight:600;
  color:var(--brass-500);
}

@media (max-width:820px){
  .service-teasers{ grid-template-columns:1fr; }
  .cta-band .container{ justify-content:flex-start; }
}

/* ---------- Wave dividers (transições fluidas entre seções) ---------- */
.wave-divider{
  display:block;
  width:100%;
  height:auto;
  line-height:0;
}
.wave-divider svg{ display:block; width:100%; height:60px; }
@media (min-width:760px){
  .wave-divider svg{ height:90px; }
}

/* ---------- Banner do porto (full-bleed) ---------- */
.port-banner{
  position:relative;
  overflow:hidden;
  background:var(--navy-900);
  line-height:0;
}
.port-banner img{
  width:100%;
  height:clamp(160px, 26vw, 340px);
  object-fit:cover;
  object-position:center bottom;
}
.port-banner .caption{
  position:absolute;
  left:24px;
  bottom:14px;
  font-family:var(--font-mono);
  font-size:0.72rem;
  color:var(--brass-300);
  opacity:0.85;
  letter-spacing:0.03em;
}

/* ---------- Galeria fluida ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  align-items:start;
  gap:20px;
}
.gallery-item{
  position:relative;
  border-radius:var(--radius-sm);
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--navy-800);
  isolation:isolate;
}
.gallery-item.tall{ aspect-ratio:4/5; }
.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
  display:block;
}
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-item::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(11,35,56,0.85));
  pointer-events:none;
}
.gallery-item .cap{
  position:absolute;
  left:16px;
  bottom:14px;
  right:16px;
  z-index:1;
  color:var(--paper-50);
  font-weight:600;
  font-size:0.95rem;
}
.gallery-item .cap span{
  display:block;
  font-family:var(--font-mono);
  font-weight:400;
  font-size:0.72rem;
  color:var(--brass-300);
  margin-top:2px;
}

@media (max-width:640px){
  .gallery-grid{ grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:14px; }
}

/* ---------- Container-yard texture (fundo sutil da seção de serviços) ---------- */
.services-textured{
  position:relative;
}
.services-textured::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:url('../img/container-pattern.svg');
  background-repeat:repeat;
  background-size:180px 90px;
  opacity:0.05;
  pointer-events:none;
}
.services-textured > .container{ position:relative; }

/* ---------- WhatsApp floating button ---------- */
.wa-float{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:60;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
  font-size:1.6rem;
}
.wa-float:hover{ filter:brightness(1.05); }