*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#0b3552;background:#fff}
:root{--navy:#073957;--deep:#052f49;--yellow:#f5c400;--white:#fff}
.container{width:min(1180px,calc(100% - 40px));margin:auto}

.site-header{background:var(--deep);position:sticky;top:0;z-index:100}
.nav{min-height:78px;display:flex;align-items:center;gap:28px}
.brand{display:flex;flex-direction:column;color:#fff;text-decoration:none;line-height:.92;transition:opacity .2s ease}
.brand:hover{opacity:.82}
.brand-main{font-family:Georgia,serif;font-size:42px;font-weight:700;letter-spacing:2px}
.brand-sub{font-size:11px;font-weight:700;letter-spacing:.04em}
.nav-links{display:flex;gap:28px;margin-left:auto}
.nav-links a{position:relative;color:#fff;text-decoration:none;text-transform:uppercase;font-size:12px;font-weight:600;transition:color .2s ease}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--yellow);transition:width .25s ease}
.nav-links a:hover::after{width:100%}
.nav-links a:hover{color:var(--yellow)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 20px;
  border:0;
  text-decoration:none;
  text-transform:uppercase;
  font-weight:700;
  font-size:12px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,.2)}
.btn-yellow{background:var(--yellow);color:#0b3149}
.btn-outline{border:2px solid rgba(255,255,255,.9);color:#fff}

.hero{
  position:relative;
  min-height:560px;
  background:
    url("../img/hero-aridos-fletes-concepcion.jpg") center/cover no-repeat,
    linear-gradient(135deg,#5a6871,#bcc3c6);
  display:flex;
  align-items:center;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(3,39,60,.95) 0%,
    rgba(5,50,76,.80) 40%,
    rgba(5,50,76,.25) 72%,
    rgba(5,50,76,.08) 100%
  );
}
.hero-layout{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:48px;
}
.hero-copy{max-width:600px;color:#fff}
.eyebrow{
  margin:0 0 10px;
  color:var(--yellow);
  font-size:13px;
  font-weight:700;
  letter-spacing:.05em;
}
.hero h1{
  margin:0 0 16px;
  font-family:"Arial Narrow",Arial,sans-serif;
  font-size:clamp(56px,6.5vw,88px);
  line-height:1.04;
  font-weight:800;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.highlight{
  display:inline-block;
  background:var(--yellow);
  color:#0d3a56;
  padding:7px 12px;
  font-size:26px;
  font-weight:800;
  letter-spacing:.01em;
}
.lead{
  max-width:530px;
  margin-top:18px;
  font-size:17px;
  line-height:1.6;
  font-weight:400;
}
.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:26px;
}

/* TARJETAS DERECHA DEL HERO — AJUSTADAS */
.quick-links{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:320px;
  min-width:320px;
}

.quick-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) 24px;
  align-items:center;
  column-gap:14px;
  min-height:66px;
  padding:16px 18px 16px 20px;
  background:rgba(5,50,76,.94);
  color:#fff;
  text-decoration:none;
  border-radius:6px;
  transition:.2s ease;
}

.quick-card:hover{
  transform:translateY(-2px);
  background:#0a466a;
}

.quick-text{
  min-width:0;
  font-size:14px;
  font-weight:700;
  line-height:1.25;
  text-transform:uppercase;
}

.quick-arrow{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  font-size:20px;
  line-height:1;
  color:var(--yellow);
}

/* Ya no usamos icono dentro de las tarjetas */
.quick-icon{display:none}

.placeholder{min-height:240px;padding:60px 20px;border-bottom:1px solid #ddd}
.placeholder h2{max-width:1180px;margin:auto;color:var(--navy);font-size:36px}

@media(max-width:1050px){
  .hero-layout{gap:30px}
  .quick-links{
    width:290px;
    min-width:290px;
  }
  .quick-text{font-size:13px}
}

@media(max-width:900px){
  .nav{position:relative}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--deep);padding:8px 24px 18px;box-shadow:0 14px 24px rgba(0,0,0,.28);z-index:200}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12);width:100%}
  .nav-links a::after{display:none}
  .dropdown{width:100%}
  .dropdown-trigger{width:100%;justify-content:space-between;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12)}
  .dropdown-menu{display:none;position:static;background:transparent;box-shadow:none;padding:0 0 0 16px}
  .dropdown.open .dropdown-menu{display:block}
  .dropdown-menu a{color:#fff!important;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08)}

  .nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:30px;height:30px;margin-left:auto;background:transparent;border:0;cursor:pointer;padding:0}
  .nav-toggle span{display:block;width:100%;height:2px;background:#fff}

  .nav-cta{margin-left:10px}
  .quick-links{display:none}
}
@media(min-width:901px){
  .nav-toggle{display:none}
}

@media(max-width:560px){
  .container{width:min(100% - 28px,1180px)}
  .nav{min-height:68px}
  .brand-main{font-size:33px}
  .brand-sub{font-size:9px}
  .nav-cta{font-size:10px;padding:0 10px}
  .hero{min-height:520px}
  .hero h1{font-size:52px;line-height:1.05}
  .highlight{font-size:20px}
  .lead{font-size:15px}

  .hero-actions{
    gap:10px;
    margin-top:22px;
  }

  .hero-actions .btn{
    min-height:44px;
    padding:0 15px;
  }
}

/* ESTILOS ANTIGUOS DE SERVICIOS
   Se mantienen por compatibilidad, pero landing-v2.css
   es quien manda visualmente en estas secciones.
*/
.services-section{
  padding:80px 0;
  background:#f5f6f7;
}

.section-eyebrow{
  margin:0 0 8px;
  color:#d3a900;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
}

.services-section h2{
  margin:0 0 35px;
  color:#073957;
  font-size:42px;
  line-height:1.1;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.service-card{
  min-height:260px;
  padding:30px;
  background:#fff;
  border-top:4px solid #ffd21a;
}

.service-number{
  color:#a3adb3;
  font-size:12px;
  font-weight:700;
}

.service-card h3{
  margin:22px 0 12px;
  color:#073957;
  font-size:25px;
}

.service-card p{
  margin:0 0 25px;
  color:#4d5960;
  font-size:15px;
  line-height:1.6;
}

.service-card a{
  color:#073957;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
}

.service-card-dark{
  background:#073957;
}

.service-card-dark h3,
.service-card-dark a{
  color:#fff;
}

.service-card-dark p{
  color:#dbe5ea;
}

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

  .services-section{
    padding:55px 0;
  }

  .services-section h2{
    font-size:34px;
  }
}