/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */
.hero {
  background:var(--gradient-hero);
  color:var(--white);
  padding:80px 0 0;
  overflow:hidden; position:relative;
}
.hero::before {
  content:""; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}
.hero-top { text-align:center; padding-bottom:48px; position:relative; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(0,196,140,0.15); border:1px solid rgba(0,196,140,0.3);
  color:var(--accent); font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  padding:7px 14px; border-radius:99px; margin-bottom:24px;
}
.hero h1 { color:var(--white); margin-bottom:18px; }
.hero h1 .hl { color:var(--accent); }
.hero .lead { color:rgba(255,255,255,0.78); margin-bottom:36px; max-width:600px; margin-left:auto; margin-right:auto; }
.hero-cta-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:48px; }
.trust-bar { display:flex; gap:28px; flex-wrap:wrap; justify-content:center; margin-bottom:0; }
.trust-item { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:rgba(255,255,255,0.65); }
.trust-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; }

/* ─── MÓDULO SOLAPAS ─────────────────────────────────────── */
.hero-module {
  background:var(--white); border-radius:24px 24px 0 0;
  margin-top:48px; padding:0; overflow:hidden;
  box-shadow:0 -8px 40px rgba(0,0,0,0.15);
  position:relative;
}
.tabs-nav {
  display:grid; grid-template-columns:1fr 1fr;
  border-bottom:2px solid var(--line);
}
.tab-btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:20px 24px; font-size:16px; font-weight:700; color:var(--gray);
  background:var(--bg); border:none; cursor:pointer; transition:all 0.2s;
  font-family:inherit; border-bottom:3px solid transparent; margin-bottom:-2px;
}
.tab-btn .tab-ico { font-size:20px; }
.tab-btn.active { background:var(--white); color:var(--navy); border-bottom-color:var(--accent); }
.tab-btn:hover:not(.active) { background:var(--white); color:var(--navy-soft); }
.tab-panel { display:none; padding:36px 40px 40px; }
.tab-panel.active { display:block; }

/* Panel Necesito un flete */
.flete-form { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.flete-form .fform-group { display:flex; flex-direction:column; gap:6px; }
.flete-form .fform-group.full { grid-column:1/-1; }
.flete-form .fform-row-submit { grid-column:1/-1; display:flex; gap:12px; align-items:end; flex-wrap:wrap; }
.flete-form .fform-row-submit .fform-group { flex:1; min-width:220px; }
.flete-form label { font-size:12px; font-weight:700; color:var(--gray); text-transform:uppercase; letter-spacing:0.8px; }
.flete-form select,
.flete-form input {
  padding:12px 16px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-size:14px; font-family:inherit; color:var(--navy); background:var(--white);
  outline:none; transition:all 0.2s; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6A7A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.flete-form input { background-image:none; }
.flete-form select:focus,
.flete-form input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,196,140,0.1); }
.flete-form .btn { white-space:nowrap; }

/* Panel Soy transportista */
.trans-form { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.trans-form .tf-group { display:flex; flex-direction:column; gap:6px; }
.trans-form .tf-group.full { grid-column:1/-1; }
.trans-form label { font-size:12px; font-weight:700; color:var(--gray); text-transform:uppercase; letter-spacing:0.8px; }
.trans-form input,
.trans-form select,
.trans-form textarea {
  padding:12px 16px; border:1.5px solid var(--line); border-radius:10px;
  font-size:14px; font-family:inherit; color:var(--navy); background:var(--white);
  outline:none; transition:all 0.2s;
}
.trans-form select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6A7A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
.trans-form input:focus,
.trans-form select:focus,
.trans-form textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,196,140,0.1); }
.dias-check { display:flex; gap:8px; flex-wrap:wrap; }
.dia-btn { padding:8px 14px; border:1.5px solid var(--line); border-radius:8px; font-size:13px; font-weight:600; color:var(--gray); background:var(--white); cursor:pointer; transition:all 0.2s; font-family:inherit; }
.dia-btn.sel { background:var(--navy); color:var(--white); border-color:var(--navy); }
.trans-form-footer { display:flex; align-items:center; justify-content:space-between; margin-top:8px; grid-column:1/-1; }
.trans-nota { font-size:12px; color:var(--gray-light); }

/* ══════════════════════════════════════════════════════════
   STATS BAR
   ══════════════════════════════════════════════════════════ */
.stats-bar { background:var(--navy); padding:32px 0; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.stat-item { text-align:center; padding:0 24px; border-right:1px solid rgba(255,255,255,0.1); }
.stat-item:last-child { border:none; }
.stat-item .sval { font-size:36px; font-weight:800; color:var(--accent); letter-spacing:-1px; }
.stat-item .slbl { font-size:13px; color:rgba(255,255,255,0.6); font-weight:600; margin-top:4px; }

/* ══════════════════════════════════════════════════════════
   CÓMO FUNCIONA
   ══════════════════════════════════════════════════════════ */
.hiw-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:step; }
.hiw-step { background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-md); padding:28px 22px; position:relative; }
.hiw-num {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background:var(--navy); color:var(--white); font-weight:800; font-size:15px;
  margin-bottom:16px;
}
.hiw-step h3 { margin-bottom:8px; }
.hiw-step p { font-size:14px; color:var(--gray); }

/* ══════════════════════════════════════════════════════════
   CONFIANZA / GARANTÍAS
   ══════════════════════════════════════════════════════════ */
.confianza-section { background:var(--bg); }
.guarantee-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.guarantee-card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:28px 24px; }
.guarantee-card .gc-icon {
  width:44px; height:44px; background:var(--accent-light); border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:16px;
}
.guarantee-card h3 { margin-bottom:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.guarantee-card p { font-size:14px; color:var(--gray); }

/* ══════════════════════════════════════════════════════════
   PARA QUIÉN
   ══════════════════════════════════════════════════════════ */
.aud-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.aud-card {
  border:1.5px solid var(--line); border-radius:var(--radius-md);
  padding:32px 26px; transition:all 0.2s; display:flex; flex-direction:column;
}
.aud-card:hover { border-color:var(--accent); box-shadow:0 12px 28px -12px rgba(0,0,0,0.12); }
.aud-card .aud-icon { font-size:28px; margin-bottom:14px; }
.aud-card h3 { margin-bottom:10px; }
.aud-card p { font-size:14px; color:var(--gray); margin-bottom:20px; flex-grow:1; }

/* ─── RESPONSIVE FOR INICIO ────────────────────────────── */
@media (max-width:960px) {
  .flete-form { grid-template-columns:1fr 1fr; }
  .trans-form { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; gap:24px; }
  .stat-item { border-right:none; border-bottom:1px solid rgba(255,255,255,0.1); padding-bottom:24px; }
  .stat-item:nth-child(even) { border-bottom:none; }
  .hiw-steps { grid-template-columns:1fr 1fr; }
  .guarantee-grid,
  .aud-grid { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .tab-btn { font-size:14px; padding:16px 12px; }
  .tab-panel { padding:24px 20px 28px; }
  .flete-form { grid-template-columns:1fr; }
  .hiw-steps { grid-template-columns:1fr; }
}