/* Layout: full-width bands, 1200px content column, hairline structure, Fenix brand indigo + sky blue, one accent used sparingly */
:root{
  --bg:#F6F8FB; --surface:#FFFFFF; --ink:#141838; --muted:#4D5675; --line:#DFE4EE; color-scheme:light;
  --navy:#141838; --navy-2:#1E2350; --on-navy:#FFFFFF; --on-navy-muted:#B9C5D3;
  --accent:#1769AA; --accent-ink:#FFFFFF; --accent-soft:#EAF3FB; --accent-on-navy:#7CC4F2;
  --photo:#1B2D44; --photo-line:#24395430; --photo-label:#C9D4E0;
  --display:'Sora', 'Segoe UI', system-ui, sans-serif;
  --body:'Public Sans', 'Segoe UI', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --r:6px;
}

*{box-sizing:border-box}
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display); line-height:1.12; text-wrap:balance; margin:0; letter-spacing:-0.02em}
h1{font-size:clamp(2.2rem, 5vw, 3.6rem); font-weight:700}
h2{font-size:clamp(1.7rem, 3.4vw, 2.5rem); font-weight:700}
h3{font-size:1.2rem; font-weight:600; letter-spacing:-0.01em}
p{margin:0}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.wrap{max-width:1200px; margin-inline:auto; padding-left:max(20px, env(safe-area-inset-left, 0px)); padding-right:max(20px, env(safe-area-inset-right, 0px))}
.band{padding-block:88px}
.band.tight{padding-block:56px}
.band.white{background:var(--surface)}
.band.navy{background:var(--navy); color:var(--on-navy)}
.eyebrow{font-family:var(--mono); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:500}
.navy .eyebrow{color:var(--accent-on-navy)}
.lead{font-size:1.15rem; color:var(--muted); max-width:62ch}
.navy .lead{color:var(--on-navy-muted)}
.stack{display:flex; flex-direction:column; gap:16px}
.head{display:flex; flex-direction:column; gap:14px; margin-bottom:48px; max-width:760px}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 22px; border-radius:var(--r); font-weight:600; text-decoration:none; font-size:1rem; border:1.5px solid transparent; transition:background .15s, color .15s, border-color .15s; cursor:pointer; font-family:var(--body)}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(.93)}
.btn-outline{border-color:var(--ink); color:var(--ink); background:transparent}
.btn-outline:hover{background:var(--ink); color:var(--bg)}
.navy .btn-outline{border-color:var(--on-navy); color:var(--on-navy)}
.navy .btn-outline:hover{background:var(--on-navy); color:var(--navy)}
.btns{display:flex; flex-wrap:wrap; gap:12px}

/* Top bar + header */
.topbar{background:var(--navy); color:var(--on-navy-muted); font-size:.85rem}
.topbar .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 24px; padding-block:8px}
.topbar span{display:inline-flex; gap:18px; flex-wrap:wrap}
.topbar b{color:var(--on-navy); font-weight:500}
.site-header{background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:env(safe-area-inset-top, 0px); z-index:10}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:76px}
.brand{display:flex; flex-direction:column; text-decoration:none; color:var(--ink); line-height:1}
.brand strong{font-family:var(--display); font-size:1.65rem; font-weight:800; letter-spacing:.02em}
.brand small{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:4px}
.nav{display:flex; align-items:center; gap:28px}
.nav a{color:var(--ink); text-decoration:none; font-weight:500; font-size:.97rem; padding-block:8px; border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--accent)}
.header-cta{display:flex; gap:10px}
.header-cta .btn{min-height:44px; padding:0 16px; font-size:.93rem}
.menu{display:none}
.menu summary{list-style:none; cursor:pointer; min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:var(--r)}
.menu summary::-webkit-details-marker{display:none}
.menu-panel{position:absolute; left:0; right:0; top:100%; background:var(--surface); border-bottom:1px solid var(--line); padding:12px max(20px, env(safe-area-inset-right, 0px)) 24px max(20px, env(safe-area-inset-left, 0px)); display:flex; flex-direction:column; gap:4px}
.menu-panel a{color:var(--ink); text-decoration:none; font-weight:500; padding:12px 0; border-bottom:1px solid var(--line)}
.menu-panel .btns{margin-top:16px}
@media (max-width:980px){.nav,.header-cta{display:none} .menu{display:block}}

/* Hero */
.hero{background:var(--navy); color:var(--on-navy)}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; align-items:center; padding-block:80px 88px}
.hero h1{margin-block:18px 20px}
.route{display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:.9rem; color:var(--on-navy-muted); margin-top:32px; flex-wrap:wrap}
.route b{color:var(--on-navy); font-weight:500; padding:4px 10px; border:1px solid #ffffff33; border-radius:4px}
.route i{flex:0 0 32px; height:1px; background:#ffffff40}
@media (max-width:900px){.hero .wrap{grid-template-columns:minmax(0,1fr); gap:40px; padding-block:56px 64px}}

/* Track card */
.track{background:var(--surface); color:var(--ink); border-radius:10px; padding:28px; display:flex; flex-direction:column; gap:14px; box-shadow:0 30px 60px -30px #00000080}
.track label{font-size:.92rem; color:var(--muted)}
.track .row{display:flex; flex-wrap:wrap; gap:10px}
.track input{flex:1 1 200px; min-width:0; min-height:52px; padding:0 16px; border:1.5px solid var(--line); border-radius:var(--r); font:500 1.05rem var(--mono); background:var(--bg); color:var(--ink)}
.track .split{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding-top:16px; border-top:1px solid var(--line); font-size:.95rem}

/* Photo slots */
.foto{position:relative; background:var(--photo); background-image:repeating-linear-gradient(135deg, var(--photo-line) 0 1px, transparent 1px 14px); border-radius:var(--r); overflow:hidden; max-width:100%; aspect-ratio:4/3; display:flex; align-items:flex-end}
.foto.wide{aspect-ratio:16/9}
.foto.tall{aspect-ratio:4/5}
.foto span{font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--photo-label); padding:14px 16px}

/* Quick access */
.quick{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
.quick a{display:flex; flex-direction:column; gap:6px; padding:26px; text-decoration:none; color:var(--ink); border-right:1px solid var(--line)}
.quick a:last-child{border-right:0}
.quick a:hover{background:var(--accent-soft)}
.quick strong{font-family:var(--display); font-size:1.1rem; display:flex; justify-content:space-between; gap:8px}
.quick small{color:var(--muted); font-size:.93rem}
@media (max-width:900px){.quick{grid-template-columns:repeat(2, minmax(0,1fr))} .quick a:nth-child(2){border-right:0} .quick a:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* Feature split */
.split2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center}
@media (max-width:900px){.split2{grid-template-columns:minmax(0,1fr); gap:36px}}

/* Service grid */
.svc-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.svc{background:var(--surface); padding:32px 28px; display:flex; flex-direction:column; gap:12px}
.svc .tag{font-family:var(--mono); font-size:.78rem; color:var(--muted)}
.svc p{color:var(--muted); font-size:.98rem}
.svc a{font-weight:600; text-decoration:none; margin-top:auto}
@media (max-width:900px){.svc-grid{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:600px){.svc-grid{grid-template-columns:minmax(0,1fr)}}

/* Steps */
.steps{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:32px; counter-reset:s}
.steps.three{grid-template-columns:repeat(3, minmax(0,1fr))}
.step{display:flex; flex-direction:column; gap:10px; padding-top:20px; border-top:2px solid var(--ink)}
.step::before{counter-increment:s; content:"Paso " counter(s); font-family:var(--mono); font-size:.8rem; color:var(--accent); letter-spacing:.1em; text-transform:uppercase}
.step p{color:var(--muted); font-size:.98rem}
@media (max-width:900px){.steps,.steps.three{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:560px){.steps,.steps.three{grid-template-columns:minmax(0,1fr)}}

/* Figures */
.figures{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:32px}
.figure{display:flex; flex-direction:column; gap:6px; border-left:1px solid #ffffff2e; padding-left:24px}
.figure b{font-family:var(--display); font-size:clamp(2.4rem, 5vw, 3.4rem); font-weight:700; line-height:1; color:var(--on-navy)}
.figure span{color:var(--on-navy-muted)}
@media (max-width:700px){.figures{grid-template-columns:minmax(0,1fr)}}

/* Quotes */
.quotes{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px}
.quotes figure{margin:0; padding:32px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); display:flex; flex-direction:column; gap:20px}
.quotes blockquote{margin:0; font-size:1.08rem; line-height:1.55}
.quotes figcaption{font-weight:600; font-size:.95rem}
@media (max-width:760px){.quotes{grid-template-columns:minmax(0,1fr)}}

/* Lists, rows, FAQ */
.checks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.checks li{display:grid; grid-template-columns:22px minmax(0,1fr); gap:12px}
.checks li::before{content:""; width:12px; height:12px; margin-top:7px; border:2px solid var(--accent); border-radius:2px}
.rows{display:flex; flex-direction:column}
.rows div{display:flex; justify-content:space-between; gap:16px; padding-block:16px; border-bottom:1px solid var(--line)}
.rows div b{font-family:var(--mono); font-weight:500; text-align:right}
.note{font-size:.9rem; color:var(--muted)}
.faq{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; padding:20px 40px 20px 0; font-weight:600; font-size:1.05rem; list-style:none; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:4px; top:16px; font:400 1.5rem var(--mono); color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:20px; color:var(--muted); max-width:70ch}
.faq-group{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.2fr); gap:40px; padding-block:40px; border-top:1px solid var(--line)}
@media (max-width:800px){.faq-group{grid-template-columns:minmax(0,1fr); gap:16px}}
.values{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:28px}
.values div{display:flex; flex-direction:column; gap:8px}
.values p{color:var(--muted); font-size:.95rem}
@media (max-width:900px){.values{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:520px){.values{grid-template-columns:minmax(0,1fr)}}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chips span{padding:8px 14px; border:1px solid var(--line); border-radius:999px; font-size:.93rem; background:var(--surface)}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:32px; display:flex; flex-direction:column; gap:14px}

/* Page header (inner pages) */
.page-head{background:var(--navy); color:var(--on-navy)}
.page-head .wrap{padding-block:72px 64px; display:flex; flex-direction:column; gap:16px; max-width:1200px}
.page-head .lead{color:var(--on-navy-muted)}
.anchor-nav{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:12px}
.anchor-nav a{color:var(--on-navy); text-decoration:none; font-size:.95rem; border-bottom:1px solid #ffffff40; padding-bottom:2px}

/* CTA band */
.cta .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:28px}

/* Footer */
.site-footer{background:var(--navy); color:var(--on-navy-muted); font-size:.95rem}
.site-footer .cols{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3, minmax(0,1fr)); gap:40px; padding-block:64px 40px}
.site-footer h4{color:var(--on-navy); font:600 .8rem var(--mono); letter-spacing:.14em; text-transform:uppercase; margin:0 0 14px}
.site-footer a{color:var(--on-navy-muted); text-decoration:none; display:block; padding-block:4px}
.site-footer a:hover{color:var(--on-navy)}
.site-footer .legal{border-top:1px solid #ffffff1f; padding-block:20px 28px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:.85rem}
.site-footer .brand{color:var(--on-navy)}
.site-footer .brand small{color:var(--on-navy-muted)}
@media (max-width:860px){.site-footer .cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:520px){.site-footer .cols{grid-template-columns:minmax(0,1fr)}}

/* WhatsApp float */
.wa{position:fixed; right:calc(20px + env(safe-area-inset-right, 0px)); bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:20; display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 18px 0 14px; border-radius:999px; background:#157F3B; color:#FFFFFF; text-decoration:none; font-weight:600; box-shadow:0 12px 30px -10px #00000070}
@media (max-width:520px){.wa span{display:none} .wa{padding:0 14px}}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Brand logo, photos, hero image */
.brand img{height:44px; width:auto; display:block}
.site-footer .brand img{height:38px}
img.foto{width:100%; height:auto; object-fit:cover; display:block; background:var(--photo)}
.hero{background:linear-gradient(90deg, rgba(20,24,56,.96) 0%, rgba(20,24,56,.88) 42%, rgba(20,24,56,.45) 100%), url('https://mifenixcargo.com/web/wp-content/uploads/2026/10/fenix-web-portada-carga.jpg') center/cover no-repeat var(--navy)}
.page-head{background:linear-gradient(90deg, rgba(20,24,56,.95) 0%, rgba(20,24,56,.85) 50%, rgba(20,24,56,.55) 100%), var(--bg-img, none) center/cover no-repeat var(--navy)}
@media (max-width:900px){.hero{background:linear-gradient(rgba(20,24,56,.9), rgba(20,24,56,.9)), url('https://mifenixcargo.com/web/wp-content/uploads/2026/10/fenix-web-portada-carga.jpg') center/cover no-repeat var(--navy)}}
.ig{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:28px}
.ig-handle{display:inline-flex; align-items:center; gap:12px; font-family:var(--display); font-size:clamp(1.5rem,3vw,2.2rem); font-weight:700; color:var(--ink); text-decoration:none}
.ig-handle svg{flex:0 0 auto}
.social{display:flex; gap:10px; margin-top:6px}
.social a{display:inline-flex; align-items:center; gap:8px}
.hero .eyebrow,.page-head .eyebrow{color:var(--accent-on-navy)}
.hero .lead{color:var(--on-navy-muted)}
.hero .btn-outline,.page-head .btn-outline{border-color:var(--on-navy); color:var(--on-navy)}
.hero .btn-outline:hover,.page-head .btn-outline:hover{background:var(--on-navy); color:var(--navy)}
.site-header .brand img{height:52px}
@media (max-width:700px){.topbar{display:none} .hero .wrap{padding-block:40px 48px}}
/* Contact form */
.contact-grid{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:32px; align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
.form{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 20px}
.form .full,.form fieldset{grid-column:1/-1}
.form [hidden]{display:none!important}
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field label,.form legend{font-weight:600; font-size:.95rem}
.field label span,.form legend span{font-weight:400; color:var(--muted)}
.form input,.form select,.form textarea{width:100%; min-height:48px; padding:10px 14px; border:1.5px solid var(--line); border-radius:var(--r); font:inherit; font-size:1rem; background:var(--surface); color:var(--ink)}
.form textarea{min-height:150px; resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.form fieldset{border:1px solid var(--line); border-radius:var(--r); padding:18px; margin:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; min-width:0}
.form fieldset legend{padding:0 6px}
@media (max-width:640px){.form,.form fieldset{grid-template-columns:minmax(0,1fr)}}
.check{display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; font-size:.92rem; color:var(--muted); align-items:start}
.check input{width:18px; height:18px; min-height:0; margin:3px 0 0; accent-color:var(--accent)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-foot{display:flex; flex-wrap:wrap; align-items:center; gap:16px}
.form-msg{font-weight:600}
.form-msg.ok{color:#11753A}
.form-msg.err{color:#B42318}
button.btn:disabled{opacity:.6; cursor:wait}
.side{display:flex; flex-direction:column; gap:20px}
.btn-wa{background:#157F3B; color:#FFFFFF}
.btn-wa:hover{filter:brightness(.93)}
.side .rows div{padding-block:12px}
@media (max-width:1120px){.nav,.header-cta{display:none} .menu{display:block}}
.menu:not([open]) .menu-panel{display:none}
body{margin:0} .site-footer a,.note a{overflow-wrap:anywhere} img{max-width:100%}
.hero{background:var(--navy)}
@media (max-width:900px){.hero{background:var(--navy)}}
.hero-side{display:flex; flex-direction:column; min-width:0; border-radius:12px; overflow:hidden; box-shadow:0 30px 60px -30px #00000099}
.hero-photo{width:100%; aspect-ratio:16/10; object-fit:cover; object-position:center 35%; display:block}
.hero-side .track{border-radius:0; box-shadow:none}