/* ============================================================
   DB COURIER · LANDING (secciones de la home)
   ============================================================ */

/* Compensar el header sticky al saltar con anclas (#...) */
#como-funciona, #cotizador, #testimonios { scroll-margin-top: 84px; }

/* Botones del hero */
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.btn{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:.98rem;padding:14px 24px;border-radius:12px;border:2px solid transparent;
  transition:transform .06s, background .15s, box-shadow .2s, color .15s;
}
.btn:active{transform:translateY(1px)}
.btn--rojo{background:var(--rojo);color:#fff;box-shadow:0 12px 26px -10px rgba(230,0,18,.6)}
.btn--rojo:hover{background:#cc0010}
.btn--out{background:#fff;color:var(--azul);border-color:var(--tint-2)}
.btn--out:hover{background:var(--tint)}

/* Encabezado de sección (reutilizable) */
.lp-section{padding:56px 0}
.lp-head{text-align:center;max-width:640px;margin:0 auto 34px}
.lp-head h2{font-size:clamp(1.5rem,4vw,2.1rem);font-weight:900;letter-spacing:-.01em}
.lp-head h2 .u{display:block;width:56px;height:4px;background:var(--rojo);border-radius:4px;margin:12px auto 0}
.lp-head p{color:var(--gris);font-weight:500;margin-top:12px}

/* ---------- Cómo funciona ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.step-card{
  position:relative;background:#fff;border:1px solid var(--linea);border-radius:16px;
  padding:26px 18px 20px;text-align:center;
}
.step-card .num{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  width:30px;height:30px;border-radius:50%;background:var(--rojo);color:#fff;
  font-weight:800;font-size:.9rem;display:grid;place-items:center;box-shadow:0 6px 14px -6px rgba(230,0,18,.7);
}
.step-card .ic{
  width:52px;height:52px;margin:6px auto 12px;border-radius:14px;background:var(--tint);
  display:grid;place-items:center;color:var(--azul);
}
.step-card h3{font-size:1rem;font-weight:800;margin-bottom:6px}
.step-card p{font-size:.85rem;color:var(--gris);font-weight:500;line-height:1.45}

/* ---------- Misión / Visión / Valores ---------- */
.mv{background:linear-gradient(120deg,var(--azul),#0a37a0);color:#fff}
.mv .wrap{padding:52px 0}
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mv-card{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:26px}
.mv-card .k{font-weight:800;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#cfe0ff}
.mv-card p{font-size:1.12rem;font-weight:700;margin-top:8px;line-height:1.4}
.valores{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.valores span{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:999px;
  padding:9px 18px;font-weight:700;font-size:.88rem;
}
.valores span::before{content:"✓";margin-right:7px;color:#7dffb0;font-weight:900}

/* ---------- Testimonios ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.review{background:#fff;border:1px solid var(--linea);border-radius:16px;padding:22px;box-shadow:0 12px 30px -22px rgba(7,26,74,.4)}
.review .stars{color:#FFB400;font-size:1rem;letter-spacing:2px}
.review .txt{margin:12px 0 16px;font-weight:500;color:#33456e;line-height:1.5}
.review .who{display:flex;align-items:center;gap:12px}
.review .avatar{
  width:44px;height:44px;border-radius:50%;flex:none;object-fit:cover;
  background:var(--azul);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1rem;
}
.review .nombre{font-weight:800;font-size:.95rem}
.review .nombre small{display:block;color:var(--gris);font-weight:600;font-size:.76rem}

/* ---------- FAQ (acordeón nativo <details>) ---------- */
#faq, #contacto { scroll-margin-top: 84px; }
.faq{max-width:760px;margin:0 auto;display:grid;gap:12px}
.faq details{
  background:#fff;border:1px solid var(--linea);border-radius:14px;overflow:hidden;
}
.faq summary{
  list-style:none;cursor:pointer;padding:16px 18px;font-weight:800;font-size:.98rem;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-weight:800;font-size:1.3rem;color:var(--azul);flex:none;transition:transform .2s;
}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{color:var(--azul)}
.faq .ans{padding:0 18px 16px;color:#33456e;font-weight:500;line-height:1.55}

/* ---------- Texto legal (privacidad / términos) ---------- */
.legal{max-width:760px;margin:0 auto;color:#33456e}
.legal h2{font-size:1.15rem;font-weight:800;color:var(--texto);margin:26px 0 8px}
.legal h2:first-child{margin-top:0}
.legal p{font-weight:500;line-height:1.6;margin-bottom:10px}
.legal ul{margin:0 0 10px 20px;font-weight:500;line-height:1.6}
.legal a{color:var(--azul);font-weight:700}
.legal .updated{color:var(--gris);font-weight:600;font-size:.85rem;margin-bottom:18px}

/* ---------- Productos con restricciones ---------- */
.restrict-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.restrict-card{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:18px}
.restrict-card .rc-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.restrict-card .ic{
  width:40px;height:40px;flex:none;border-radius:11px;background:var(--tint);
  display:grid;place-items:center;color:var(--azul);
}
.restrict-card h3{font-size:.98rem;font-weight:800}
.restrict-card p{color:#33456e;font-weight:500;font-size:.9rem;line-height:1.5}
.restrict-note{
  margin-top:20px;background:#FFF4F5;border:1.5px solid #FAD1D6;border-radius:16px;
  padding:20px 22px;font-weight:600;color:var(--texto);line-height:1.55;
  display:flex;gap:14px;align-items:flex-start;
}
.restrict-note .ic{flex:none;color:var(--rojo);margin-top:2px}
.restrict-note a{color:var(--azul);font-weight:800}
@media (max-width:640px){ .restrict-grid{grid-template-columns:1fr} }

/* ---------- Contacto ---------- */
.contacto{background:var(--tint)}
.contacto .wrap{padding:52px 0}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:6px}
.contact-card{background:#fff;border:1px solid var(--linea);border-radius:16px;padding:22px;text-align:center}
.contact-card .ic{
  width:48px;height:48px;margin:0 auto 12px;border-radius:14px;background:var(--tint);
  display:grid;place-items:center;color:var(--azul);
}
.contact-card h3{font-size:1rem;font-weight:800;margin-bottom:6px}
.contact-card p{color:var(--gris);font-weight:600;font-size:.9rem;line-height:1.5}
.contact-card a{color:var(--azul);text-decoration:none;font-weight:700}
.contact-card a:hover{text-decoration:underline}
.contact-cta{text-align:center;margin-top:26px}

@media (max-width:900px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .reviews{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .lp-section{padding:44px 0}
  .steps{grid-template-columns:1fr}
  .mv-grid{grid-template-columns:1fr}
}