/* =========================================================
   TREFA — style.css (reconstrucción)
   Paleta: navy #04143F / orange #D95B34 / paper #F6F3EC
   Tipografía: Poppins (display) + Inter (texto)
   ========================================================= */

:root{
  --navy: #04143F;
  --navy-900: #020a24;
  --navy-2: #0b2358;
  --icon: #061F62;
  --orange: #D95B34;
  --orange-2: #c04d2a;
  --paper: #F6F3EC;
  --white: #ffffff;
  --ink: #12203a;
  --muted: #5b6b85;
  --line: #e6e2d8;
  --shadow: 0 10px 30px rgba(4,20,63,.08);
  --radius: 14px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Inter',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{
  font-family:'Poppins',sans-serif;
  margin:0 0 .5em;
  color:var(--navy);
  line-height:1.15;
}
p{ margin:0 0 1em; color:var(--ink); line-height:1.65; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }

.wrap{ max-width:1320px; margin:0 auto; padding:0 40px; }
.block{ padding:88px 0; }
.bg-paper{ background:var(--paper); }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; border-radius:999px;
  font-weight:600; font-size:15px;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-orange{ background:var(--orange); color:#fff; }
.btn-orange:hover{ background:var(--orange-2); transform:translateY(-1px); box-shadow:0 8px 20px rgba(217,91,52,.35); }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn-ghost:hover{ background:rgba(255,255,255,.12); }

/* ---------- Header / Nav ---------- */
#hdr{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent;
  transition:background .25s ease, box-shadow .25s ease;
}
#hdr.scrolled{ background:var(--navy); box-shadow:0 4px 20px rgba(0,0,0,.15); }
.nav{
  max-width:1180px; margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between;
  position:relative;
}
.logo{ display:flex; align-items:center; }
.logo img{ height:34px; }
.logo-n{ display:none; }
.logo-w{ display:block; }

.menu{ display:flex; align-items:center; gap:28px; }
.lnk{ color:#fff; font-size:14.5px; font-weight:500; opacity:.88; display:flex; align-items:center; gap:4px; }
.lnk:hover, .lnk.active{ opacity:1; }
.lnk.active{ color:var(--orange); }
.car{ font-size:11px; margin-left:2px; }

.has-dd{ position:relative; }
.has-dd .dd-panel{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  background:#fff; border-radius:12px; box-shadow:var(--shadow);
  padding:10px; min-width:230px;
  opacity:0; visibility:hidden; translate:0 8px;
  transition:opacity .18s ease, translate .18s ease, visibility .18s ease;
}
.has-dd:hover .dd-panel, .has-dd.active .dd-panel{
  opacity:1; visibility:visible; translate:0 0;
}
.dd-panel a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:8px;
  color:var(--ink); font-size:14px; font-weight:500;
  white-space:nowrap;
}
.dd-panel a:hover{ background:var(--paper); color:var(--navy); }
.dic{ font-size:16px; }

.hamb{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
.hamb span{ width:22px; height:2px; background:#fff; border-radius:2px; }

/* ---------- Mobile menu ---------- */
.mobile-menu{
  display:none;
  position:fixed; inset:0; z-index:200;
  background:var(--navy);
  padding:28px 28px 40px;
  overflow-y:auto;
}
.mobile-menu.open{ display:block; }
.mobile-menu .x{
  position:absolute; top:22px; right:26px;
  color:#fff; font-size:32px; line-height:1; cursor:pointer;
}
.mobile-menu a, .mobile-menu .mm-label{
  display:block; color:#fff; font-size:19px; font-weight:600;
  padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1);
}
.mm-sub{ padding-left:14px; }
.mm-sub a{ font-size:16px; font-weight:400; color:#cdd9ea; border-bottom:none; padding:10px 0; }
.mobile-menu .btn-orange{ margin-top:22px; width:100%; justify-content:center; }

/* ---------- Reveal-on-scroll ---------- */
.rv{ opacity:0; translate:0 22px; transition:opacity .6s ease, translate .6s ease; }
.rv.in{ opacity:1; translate:0 0; }

/* ---------- Hero (home) ---------- */
.hero{ padding:120px 0 90px; color:#fff; }
.hero-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:56px; align-items:center; }
.hero-logo{ height:30px; margin-bottom:28px; }
.hero h1{ color:#fff; font-size:46px; font-weight:800; letter-spacing:-.5px; }
.hero .acc{ color:var(--orange); }
.hero .lead{ color:#dbe2f2; font-size:17px; max-width:52ch; }
.hero-cta{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }

.corridor{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius); padding:28px;
  backdrop-filter:blur(6px);
}
.corridor h4{ color:#9fb0d6; text-transform:uppercase; font-size:12px; letter-spacing:1.5px; margin-bottom:6px; }
.route-title{ color:#fff; font-weight:700; font-size:19px; margin-bottom:18px; }
.modes-list{ display:flex; flex-direction:column; gap:14px; }
.mode-row{ display:flex; align-items:center; gap:14px; }
.mi{ font-size:22px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); border-radius:10px; flex-shrink:0; }
.mt{ display:flex; flex-direction:column; }
.mt b{ color:#fff; font-size:15px; }
.mt span{ color:#9fb0d6; font-size:13px; }
.corridor .foot{ margin-top:20px; padding-top:16px; border-top:1px solid rgba(255,255,255,.14); color:#9fb0d6; font-size:13px; display:flex; gap:8px; }

/* ---------- Trust bar ---------- */
.trust{ background:var(--paper); border-bottom:1px solid var(--line); }
.trust .row{ display:flex; flex-wrap:wrap; gap:28px; padding:20px 28px; justify-content:center; }
.trust .it{ font-size:13.5px; color:var(--navy); font-weight:600; display:flex; align-items:center; gap:8px; }
.trust .it b{ color:var(--orange); }

/* ---------- Section headings ---------- */
.eyebrow{
  display:inline-block; color:var(--orange); font-weight:700;
  font-size:13px; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:10px;
}
.shead{ max-width:640px; margin-bottom:44px; }
.shead.center{ text-align:center; }
.shead h2{ font-size:32px; }
.shead p{ color:var(--muted); }

.expand-band{
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  color:#fff; border-radius:22px; padding:56px; text-align:center;
}
.expand-band .eyebrow{ color:#ffb499; }
.expand-band h2{ color:#fff; font-size:30px; max-width:26ch; margin-left:auto; margin-right:auto; }
.expand-band p{ color:#c4d1ee; max-width:56ch; margin-left:auto; margin-right:auto; }

/* ---------- Rodo / quienes somos ---------- */
.rodo{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center; }
.rodo figure{ margin:0; border-radius:22px; overflow:hidden; box-shadow:var(--shadow); }
.rodo img{ width:100%; height:100%; object-fit:cover; }
.rtx h2{ font-size:30px; }
.rtx p{ color:var(--muted); max-width:56ch; }

/* ---------- Cobertura ---------- */
.cov{ display:grid; grid-template-columns:1.2fr .8fr; gap:32px; }
.cov-card, .bases{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:32px; box-shadow:var(--shadow);
}
.cov-card h3, .bases h3{ font-size:20px; }
.cov-card p, .bases .sub{ color:var(--muted); }
.cov-list{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.ci{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--navy); }
.fl{ font-size:16px; }
.flags{ display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.flags img{ height:22px; width:auto; border-radius:3px; }

.base{ display:flex; align-items:flex-start; gap:12px; margin-top:18px; }
.base:first-of-type{ margin-top:24px; }
.pin{ font-size:18px; }
.base b{ color:var(--navy); font-size:14.5px; }
.base small{ color:var(--muted); display:block; font-size:12.5px; margin-top:2px; }
.soon{ display:inline-block; background:#fdecea; color:var(--orange); font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; margin-left:6px; vertical-align:middle; }

/* ---------- Servicios grid ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.svc{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; transition:transform .18s ease, box-shadow .18s ease; position:relative;
}
.svc:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.svc .ic{ width:48px; height:48px; border-radius:12px; background:var(--paper); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.svc h3{ font-size:18px; margin-bottom:6px; }
.svc p{ color:var(--muted); font-size:14px; margin-bottom:14px; }
.svc .go{ color:var(--orange); font-weight:600; font-size:14px; }
.badge-new{
  position:absolute; top:18px; right:18px; background:var(--orange); color:#fff;
  font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:999px;
}

/* ---------- CTA band ---------- */
.ctaband{
  border-radius:24px; padding:64px 40px; text-align:center; color:#fff;
  background-size:cover; background-position:center;
}
.ctaband h2{ color:#fff; font-size:30px; }
.ctaband p{ color:#dbe2f2; max-width:50ch; margin-left:auto; margin-right:auto; }
.ctaband .row{ display:flex; gap:14px; justify-content:center; margin-top:22px; flex-wrap:wrap; }

/* ---------- Footer ---------- */
footer{ background:var(--navy); color:#c4d1ee; padding:64px 0 24px; }
.fgrid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; }
.flogo{ height:30px; margin-bottom:14px; }
footer p{ color:#9fb0d6; font-size:14px; }
.socials{ display:flex; gap:10px; margin-top:16px; }
.socials a{
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff;
}
footer h5{ color:#fff; font-size:14px; margin-bottom:16px; }
footer ul li{ margin-bottom:10px; }
footer ul a{ color:#9fb0d6; font-size:14px; }
footer ul a:hover{ color:#fff; }
.fbottom{
  margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:12.5px; color:#7c8db3;
}
.fbottom a{ color:#7c8db3; }
.fbottom a:hover{ color:#fff; }

/* ---------- WhatsApp widget ---------- */
.wa{ position:fixed; right:24px; bottom:24px; z-index:150; }
.wa-btn{
  width:58px; height:58px; border-radius:50%; background:#25D366; border:none;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.wa-btn svg{ width:28px; height:28px; fill:#fff; }
.wa-panel{
  position:absolute; bottom:74px; right:0; width:280px;
  background:#fff; border-radius:16px; box-shadow:var(--shadow);
  padding:18px; display:none;
}
.wa-panel.open{ display:block; }
.wa-head b{ display:block; color:var(--navy); font-size:15px; margin-bottom:4px; }
.wa-head p{ color:var(--muted); font-size:13px; margin-bottom:14px; }
.wa-opt{
  display:flex; align-items:center; gap:12px; padding:10px; border-radius:10px;
}
.wa-opt:hover{ background:var(--paper); }
.wa-opt .av{ font-size:20px; width:38px; height:38px; background:var(--paper); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.wa-opt b{ display:block; font-size:13.5px; color:var(--navy); }
.wa-opt small{ color:var(--muted); font-size:11.5px; }

/* =========================================================
   Sub-page hero (phero) — nosotros, servicios, contacto
   ========================================================= */
.phero{ padding:150px 0 70px; color:#fff; background-size:cover; background-position:center; }
.crumb{ font-size:13px; color:#9fb0d6; margin-bottom:16px; display:flex; gap:8px; }
.crumb a{ color:#c4d1ee; }
.crumb a:hover{ color:#fff; }
.phero h1{ color:#fff; font-size:40px; }
.phero p{ color:#dbe2f2; max-width:60ch; font-size:16px; }

/* ---------- Mission / Vision ---------- */
.mv{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:12px; }
.mvcard{ padding:32px; border-radius:var(--radius); color:#fff; }
.mvcard.m{ background:var(--navy); }
.mvcard.v{ background:var(--orange); }
.mvcard h3{ color:#fff; font-size:20px; }
.mvcard p{ color:rgba(255,255,255,.88); }

/* ---------- Valores ---------- */
.vals{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.val{ text-align:center; padding:12px; }
.val .n{ font-family:'Poppins',sans-serif; font-size:34px; font-weight:800; color:var(--line); margin-bottom:8px; }
.val h3{ font-size:16px; }
.val p{ color:var(--muted); font-size:13.5px; }

/* ---------- Sectores ---------- */
.svc-banner{ border-radius:var(--radius); overflow:hidden; }
.sector-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.sc{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:18px 10px; background:var(--paper); border-radius:12px; text-align:center;
}
.si{ font-size:22px; }
.sc span{ font-size:12.5px; font-weight:600; color:var(--navy); }

/* ---------- Air freight cards (hcard) ---------- */
.hcard-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.hcard{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; }
.himg{ width:100%; height:180px; object-fit:cover; }
.hbody{ padding:24px; }
.mtag{ display:inline-block; background:var(--paper); color:var(--orange); font-size:11px; font-weight:700; letter-spacing:1px; padding:4px 10px; border-radius:999px; margin-bottom:10px; }
.hbody h3{ font-size:18px; }
.hbody p{ color:var(--muted); font-size:14px; }
.hbody ul{ margin-top:10px; }
.hbody li{ font-size:13.5px; color:var(--ink); padding-left:18px; position:relative; margin-bottom:6px; }
.hbody li::before{ content:"✓"; position:absolute; left:0; color:var(--orange); font-weight:700; }

/* ---------- Ground freight modal cards ---------- */
.modal-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.modal-card{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; }
.mimg{ width:100%; height:190px; object-fit:cover; }
.mbody{ padding:24px; }
.mbody h3{ font-size:18px; }
.mbody p{ color:var(--muted); font-size:14px; }
.mbody ul{ margin-top:10px; }
.mbody li{ font-size:13.5px; color:var(--ink); padding-left:18px; position:relative; margin-bottom:6px; }
.mbody li::before{ content:"✓"; position:absolute; left:0; color:var(--orange); font-weight:700; }

/* ---------- Service rows (srow) — maritimo / seguros / aereo alcance ---------- */
.srow{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-bottom:56px; }
.srow:last-child{ margin-bottom:0; }
.srow.rev{ direction:rtl; }
.srow.rev > *{ direction:ltr; }
.sr-media{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.sr-media img{ width:100%; height:280px; object-fit:cover; }
.sr-tx .num{ color:var(--orange); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:1px; }
.sr-tx h3{ font-size:24px; margin-top:8px; }
.sr-tx p{ color:var(--muted); }
.sr-list{ margin-top:14px; }
.sr-list li{ font-size:14px; color:var(--ink); padding-left:20px; position:relative; margin-bottom:8px; }
.sr-list li::before{ content:"✓"; position:absolute; left:0; color:var(--orange); font-weight:700; }

/* ---------- Contact page ---------- */
.cgrid{ display:grid; grid-template-columns:1.2fr .8fr; gap:40px; }
.cform{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow); }
.cform label{ display:block; font-size:13px; font-weight:600; color:var(--navy); margin:16px 0 6px; }
.cform label:first-child{ margin-top:0; }
.cform input, .cform select, .cform textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:14.5px; color:var(--ink); background:var(--paper);
}
.cform textarea{ min-height:100px; resize:vertical; }
.cform input:focus, .cform select:focus, .cform textarea:focus{ outline:2px solid var(--orange); outline-offset:1px; }

.cinfo{ display:flex; flex-direction:column; gap:14px; }
.ic-card{
  display:flex; align-items:flex-start; gap:14px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px;
}
.ic-card .ico{ font-size:20px; width:42px; height:42px; background:var(--paper); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ic-card b{ display:block; color:var(--navy); font-size:14.5px; }
.ic-card span{ color:var(--muted); font-size:13px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px){
  .menu{ display:none; }
  .hamb{ display:flex; }
  .hero-grid, .rodo, .cov, .mv, .srow, .cgrid, .hcard-list, .modal-grid{ grid-template-columns:1fr; }
  .srow.rev{ direction:ltr; }
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .vals{ grid-template-columns:repeat(2,1fr); }
  .sector-grid{ grid-template-columns:repeat(3,1fr); }
  .fgrid{ grid-template-columns:1fr 1fr; }
  .hero h1{ font-size:34px; }
  .cov-list{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .block{ padding:56px 0; }
  .svc-grid{ grid-template-columns:1fr; }
  .sector-grid{ grid-template-columns:repeat(2,1fr); }
  .fgrid{ grid-template-columns:1fr; }
  .expand-band{ padding:36px 24px; }
  .ctaband{ padding:44px 24px; }
}