/* ============================================================
   DB COURIER · BASE
   Variables, reset, tipografía, layout, header, footer,
   botones y componentes compartidos entre páginas.
   Paleta y tipografía según Manual de Marca DB Courier.
   ============================================================ */
:root{
  --azul:#0D47C9;
  --azul-oscuro:#071A4A;
  --rojo:#E60012;
  --blanco:#FFFFFF;
  --tint:#EEF3FC;
  --tint-2:#DCE4F5;
  --linea:#D3DEF3;
  --texto:#0B1B3F;
  --gris:#5B6B8C;
  --ok-bg:#F3F7FF;
  --sombra:0 18px 50px -20px rgba(7,26,74,.35);
  --radio:18px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* Foco visible para navegación por teclado (accesibilidad) */
a:focus-visible, button:focus-visible, input:focus-visible,
summary:focus-visible, [tabindex]:focus-visible{
  outline:3px solid rgba(13,71,201,.55);
  outline-offset:2px;
  border-radius:8px;
}
body{
  font-family:'Montserrat',Arial,sans-serif;
  color:var(--texto);
  background:
    radial-gradient(1200px 500px at 85% -8%, rgba(13,71,201,.10), transparent 60%),
    radial-gradient(900px 420px at -5% 12%, rgba(230,0,18,.07), transparent 55%),
    var(--blanco);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:min(1080px,92%);margin-inline:auto}

/* ---------- Barra superior ---------- */
header.topbar{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
.topbar .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:44px;width:auto;display:block}
nav.links{display:flex;align-items:center;gap:8px}
nav.links a{
  font-weight:700;font-size:.82rem;letter-spacing:.02em;text-transform:uppercase;
  color:var(--azul);text-decoration:none;padding:9px 14px;border-radius:999px;
  transition:background .15s,color .15s;
}
nav.links a:hover{background:var(--tint)}
nav.links a.active{background:var(--tint)}
nav.links a.cta{background:var(--rojo);color:#fff}
nav.links a.cta:hover{background:#c30010}
.burger{display:none;border:0;background:none;cursor:pointer;padding:6px;border-radius:10px;line-height:0}
.burger:hover{background:var(--tint)}

/* ---------- Hero (compartido) ---------- */
.hero{padding:52px 0 12px;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--azul);background:var(--tint);padding:7px 14px;border-radius:999px;
}
.eyebrow b{color:var(--rojo)}
.hero h1{
  font-size:clamp(1.9rem,5vw,3.15rem);font-weight:900;line-height:1.06;
  letter-spacing:-.01em;margin:18px auto 10px;max-width:14ch;
}
.hero h1 span{color:var(--azul)}
.hero h1 em{color:var(--rojo);font-style:normal}
.hero p.sub{color:var(--gris);font-weight:500;max-width:52ch;margin:0 auto;font-size:1.02rem}

/* ---------- Ruta de vuelo (elemento distintivo, compartido) ---------- */
.ruta{width:min(520px,90%);margin:26px auto 6px;display:block}
.ruta .track{fill:none;stroke:var(--tint-2);stroke-width:2}
.ruta .path{fill:none;stroke:var(--rojo);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:5 7}
.ruta .dot{fill:var(--azul)}
.ruta .dot.end{fill:var(--rojo)}
.ruta text{font-family:'Montserrat';font-weight:800;font-size:13px;fill:var(--azul-oscuro);letter-spacing:.06em}
.ruta .plane{fill:var(--rojo)}
@media (prefers-reduced-motion:no-preference){
  .ruta .plane{animation:vuela 4.5s ease-in-out infinite}
}
@keyframes vuela{
  0%{transform:translate(0,0);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translate(360px,-58px);opacity:0}
}

/* ---------- Tarjeta (compartida) ---------- */
main{padding:8px 0 60px}
.card{
  background:var(--blanco);border:1px solid var(--linea);border-radius:24px;
  box-shadow:var(--sombra);overflow:hidden;max-width:760px;margin:22px auto 0;
}
.card__head{
  background:linear-gradient(120deg,var(--azul),#0a37a0);
  color:#fff;padding:22px 28px;display:flex;align-items:center;gap:14px;
}
.card__head .ic{
  width:42px;height:42px;flex:none;border-radius:12px;background:rgba(255,255,255,.16);
  display:grid;place-items:center;
}
.card__head h2{font-size:1.15rem;font-weight:800;letter-spacing:.01em}
.card__head p{font-size:.85rem;font-weight:500;opacity:.85}
.card__body{padding:28px}

/* ---------- Campos y controles (compartidos) ---------- */
.field label{display:block;font-weight:700;font-size:.9rem;margin-bottom:8px}
.field .hint{color:var(--gris);font-weight:500;font-size:.78rem;margin-top:6px}
.field--tipo{margin-top:22px}
.inputbox{
  display:flex;align-items:center;border:1.5px solid var(--linea);border-radius:14px;
  background:var(--tint);padding:0 14px;transition:border-color .15s,box-shadow .15s,background .15s;
}
.inputbox:focus-within{border-color:var(--azul);background:#fff;box-shadow:0 0 0 4px rgba(13,71,201,.12)}
.inputbox .pre{color:var(--gris);font-weight:800;font-size:1.05rem}
.inputbox input{
  border:0;outline:0;background:none;width:100%;padding:15px 8px;
  font-family:inherit;font-weight:700;font-size:1.15rem;color:var(--texto);
}
.inputbox input::placeholder{color:#9fb0d0;font-weight:600}

/* toggle segmentado (unidad / tipo / tipo de búsqueda) */
.seg{display:inline-flex;flex-wrap:wrap;background:var(--tint);border:1.5px solid var(--linea);border-radius:12px;padding:4px;gap:4px;margin-top:10px}
.seg button{
  border:0;cursor:pointer;font-family:inherit;font-weight:800;font-size:.85rem;
  padding:9px 16px;border-radius:9px;background:none;color:var(--gris);transition:.15s;
}
.seg button.active{background:var(--azul);color:#fff;box-shadow:0 4px 12px -4px rgba(13,71,201,.6)}

/* botón principal (compartido) */
.calc-btn{
  margin-top:26px;width:100%;border:0;cursor:pointer;font-family:inherit;
  font-weight:800;font-size:1.05rem;letter-spacing:.02em;color:#fff;
  background:var(--rojo);padding:17px;border-radius:14px;
  transition:transform .06s,background .15s,box-shadow .2s;
  box-shadow:0 12px 26px -10px rgba(230,0,18,.6);
}
.calc-btn:hover{background:#cc0010}
.calc-btn:active{transform:translateY(1px)}

.error{color:var(--rojo);font-weight:700;font-size:.85rem;margin-top:12px;min-height:1em}

/* ---------- Footer (compartido) ---------- */
footer{margin-top:56px;background:var(--azul-oscuro);color:#cdd8f2}
footer .wrap{padding:34px 0;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
footer .tag{font-weight:800;font-size:.95rem;color:#fff}
footer .tag em{color:var(--rojo);font-style:normal}
footer small{color:#8fa2cf;font-weight:500;display:block}
footer small a{color:#cdd8f2;text-decoration:underline}
footer small a:hover{color:#fff}
.foot-right{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.socials{display:flex;gap:10px}
.social{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  color:#cdd8f2;background:rgba(255,255,255,.08);transition:background .15s,color .15s,transform .1s;
}
.social:hover{background:var(--rojo);color:#fff;transform:translateY(-1px)}

/* ---------- Botón flotante de WhatsApp (compartido) ---------- */
.wa-float{
  position:fixed;z-index:60;
  right:calc(20px + env(safe-area-inset-right));
  bottom:calc(20px + env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:10px;
  height:60px;padding:0 20px;border-radius:999px;
  background:#25D366;color:#fff;text-decoration:none;
  font-family:inherit;font-weight:800;font-size:.95rem;
  box-shadow:0 12px 26px -8px rgba(37,211,102,.7), 0 4px 10px rgba(7,26,74,.18);
  transition:transform .12s ease, box-shadow .2s ease, background .15s;
}
.wa-float svg{flex:none}
.wa-float:hover{background:#1ebe5a;transform:translateY(-2px)}
.wa-float:active{transform:translateY(0)}
.wa-float:focus-visible{outline:3px solid rgba(13,71,201,.55);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .wa-float{animation:waPop .35s ease both}
}
@keyframes waPop{from{opacity:0;transform:scale(.8) translateY(10px)}to{opacity:1;transform:none}}

/* Menú hamburguesa: en tablet y móvil (≤768px) la nav se despliega debajo del header */
@media (max-width:768px){
  .brand img{height:38px}
  .burger{display:inline-flex}
  nav.links{
    display:none;position:absolute;top:100%;right:0;left:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:#fff;border-bottom:1px solid var(--linea);
    padding:8px;box-shadow:0 18px 30px -18px rgba(7,26,74,.4);
  }
  nav.links.open{display:flex}
  nav.links a{padding:13px 14px;font-size:.9rem;border-radius:10px}
}

@media (max-width:640px){
  .card__body{padding:22px}
  footer .wrap{flex-direction:column;align-items:flex-start}
  .foot-right{align-items:flex-start}

  /* En móvil: botón circular (solo ícono) para que no estorbe ni quede al aire */
  .wa-float{
    right:calc(16px + env(safe-area-inset-right));
    bottom:calc(16px + env(safe-area-inset-bottom));
    height:56px;width:56px;padding:0;justify-content:center;
  }
  .wa-float__txt{display:none}
}
/* Deja aire extra al final para que el botón no tape el footer al hacer scroll */
footer{padding-bottom:calc(84px + env(safe-area-inset-bottom))}

/* ---------- Aviso de cookies ---------- */
.cookie-bar{
  position:fixed;z-index:70;left:20px;bottom:20px;max-width:420px;
  background:#fff;border:1px solid var(--linea);border-radius:16px;
  box-shadow:0 18px 50px -20px rgba(7,26,74,.5);
  padding:18px 20px;animation:waPop .35s ease both;
}
.cookie-bar p{font-size:.86rem;color:#33456e;font-weight:500;line-height:1.5;margin-bottom:12px}
.cookie-bar a{color:var(--azul);font-weight:700;text-decoration:none}
.cookie-bar a:hover{text-decoration:underline}
.cookie-bar .cookie-actions{display:flex;gap:10px;align-items:center}
.cookie-bar .btn-accept{
  border:0;cursor:pointer;font-family:inherit;font-weight:800;font-size:.9rem;color:#fff;
  background:var(--rojo);padding:11px 22px;border-radius:11px;transition:background .15s,transform .06s;
}
.cookie-bar .btn-accept:hover{background:#cc0010}
.cookie-bar .btn-accept:active{transform:translateY(1px)}
@media (max-width:640px){
  .cookie-bar{left:12px;right:12px;bottom:90px;max-width:none}
}