/* ============================================================
   Tío Envío — Hoja de estilos
   ============================================================ */

:root{
  --azul:#1E3A8A;
  --azul-oscuro:#132a63;
  --naranja:#F97316;
  --bg:#F8FAFC;
  --grafito:#1E293B;
  --linea-dark: rgba(248,250,252,0.14);
  --linea: #E2E8F0;
}

/* --- Reset base --- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:'Inter', sans-serif; color:var(--grafito); background:var(--bg); -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }

/* --- Tipografía --- */
h1,h2,h3,.display{ font-family:'Space Grotesk', sans-serif; letter-spacing:-0.02em; color:var(--azul-oscuro); }
h2,h3{ letter-spacing:-0.03em; line-height:1.2; }
.mono{ font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.05em; }

/* --- Layout --- */
.wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }
section{ padding:72px 0; }
section[id]{ scroll-margin-top:96px; }
.section-head{ max-width:620px; margin-bottom:44px; }
.section-head h2{ font-size:clamp(24px,3vw,34px); line-height:1.15; }
.section-head p{ color:#334155; font-size:15.5px; margin-top:12px; line-height:1.6; }

@media (max-width:820px){
  section[id]{ scroll-margin-top:76px; }
}

/* --- Botones --- */
.btn{ display:inline-flex; align-items:center; gap:10px; background:var(--naranja); color:#fff; font-weight:600; padding:14px 26px; border-radius:8px; font-size:15px; transition:transform .15s ease, box-shadow .15s ease; box-shadow:0 6px 20px rgba(249,115,22,0.32); }
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(249,115,22,0.42); }
.btn-outline{ display:inline-flex; align-items:center; gap:8px; color:var(--azul-oscuro); font-weight:600; font-size:14.5px; border:1.5px solid #fff; padding:12.5px 22px; border-radius:8px; background:#fff; }
.btn-ghost{ display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:600; font-size:14px; border:1px solid rgba(255,255,255,0.25); padding:12px 20px; border-radius:8px; background:transparent; transition:background .15s ease, border-color .15s ease; }
.btn-ghost:hover{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.4); }

/* --- Eyebrow (etiqueta pequeña sobre títulos) --- */
.eyebrow{ font-family:'Inter', sans-serif; font-weight:600; font-size:12px; letter-spacing:0.13em; text-transform:uppercase; color:var(--naranja); display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.eyebrow::before{ content:''; width:16px; height:1px; background:var(--naranja); }

/* ============================================================
   Header / navegación
   ============================================================ */
header{ position:sticky; top:0; z-index:50; background:rgba(19,42,99,0.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--linea-dark); }
nav{ display:flex; align-items:center; justify-content:space-between; padding:15px 24px; max-width:1120px; margin:0 auto; }
.logo{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk'; font-weight:700; color:#fff; font-size:17px; }
.logo-mark{ width:34px; height:34px; flex-shrink:0; border-radius:50%; box-shadow:0 0 0 1px rgba(248,250,252,0.18); }
.logo-mark svg{ width:100%; height:100%; display:block; }
.nav-links{ display:flex; gap:26px; font-size:13.5px; color:rgba(248,250,252,0.75); }
.nav-links a:hover{ color:#fff; }
@media (max-width:820px){ .nav-links{ display:none; } }

/* ============================================================
   Hero
   ============================================================ */
.hero{
  background:linear-gradient(100deg, rgba(19,42,99,0.97) 0%, var(--azul) 100%);
  color:var(--bg); padding:76px 0 64px; position:relative; overflow:hidden;
}
.hero-scene{ position:absolute; right:0; bottom:0; width:340px; opacity:0.14; pointer-events:none; }
.hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; position:relative; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:40px; } }
.hero h1{ font-size:clamp(30px,4.2vw,46px); line-height:1.12; margin-bottom:16px; color:#fff; }
.hero h1 span{ color:var(--naranja); }
.hero h2{ font-family:'Inter'; font-weight:400; font-size:19px; color:rgba(255,255,255,0.92); max-width:480px; margin-bottom:28px; line-height:1.6; }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:30px; }
.badges{ display:flex; gap:22px; flex-wrap:wrap; }
.badges div{ display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(248,250,252,0.85); }
.badges .dot{ width:7px; height:7px; border-radius:50%; background:var(--naranja); flex-shrink:0; }

/* --- Tarjeta de seguimiento (hero) --- */
.tracker{ background:#0e1f4d; border:1px solid var(--linea-dark); border-radius:16px; padding:20px; box-shadow:0 30px 60px rgba(0,0,0,0.35); }
.tracker-head{ display:flex; align-items:center; gap:10px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--linea-dark); }
.tracker-head .dot{ width:9px; height:9px; border-radius:50%; background:#16A34A; box-shadow:0 0 0 3px rgba(22,163,74,0.2); }
.tracker-head span{ font-size:13px; color:rgba(248,250,252,0.65); font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.05em; }
.bubble{ background:#16296b; border-radius:12px; padding:14px 16px; margin-bottom:10px; display:flex; gap:12px; align-items:flex-start; opacity:0; transform:translateY(10px); animation:rise .6s ease forwards; }
.bubble:nth-child(2){ animation-delay:.4s; }
.bubble:nth-child(3){ animation-delay:1.1s; }
.bubble:nth-child(4){ animation-delay:1.9s; }
@keyframes rise{ to{ opacity:1; transform:translateY(0); } }
.bubble .icon{ width:30px; height:30px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:14px; }
.bubble.retirado .icon{ background:rgba(249,115,22,0.2); color:var(--naranja); }
.bubble.camino .icon{ background:rgba(96,165,250,0.2); color:#93c5fd; }
.bubble.entregado .icon{ background:rgba(74,222,128,0.2); color:#4ADE80; }
.bubble b{ display:block; color:#fff; font-size:13.5px; margin-bottom:2px; }
.bubble p{ font-size:12.5px; color:rgba(248,250,252,0.6); margin:0; }
.bubble time{ font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.05em; font-size:10.5px; color:rgba(248,250,252,0.4); margin-left:auto; white-space:nowrap; }
.bubble-photo{ margin-top:8px; height:52px; border-radius:8px; background:repeating-linear-gradient(45deg, rgba(74,222,128,0.12), rgba(74,222,128,0.12) 6px, rgba(74,222,128,0.05) 6px, rgba(74,222,128,0.05) 12px); display:flex; align-items:center; justify-content:center; font-size:10px; color:#4ADE80; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.05em; }

/* ============================================================
   Oferta / métricas
   ============================================================ */
.offer{ background:var(--azul-oscuro); color:#fff; border-radius:20px; padding:44px; position:relative; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.04); }
.offer-top{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:36px; align-items:center; position:relative; }
@media (max-width:820px){ .offer-top{ grid-template-columns:1fr; } }
.offer h2{ color:#fff; font-size:clamp(22px,2.8vw,30px); margin-bottom:12px; }
.offer p{ color:rgba(248,250,252,0.75); font-size:15px; line-height:1.6; }
.offer-card{ background:#EEF3FC; color:var(--grafito); border:1px solid rgba(19,42,99,0.08); border-top:3px solid var(--naranja); border-radius:14px; padding:24px; box-shadow:0 12px 32px rgba(0,0,0,0.18); }
.offer-card .big{ font-family:'Space Grotesk'; font-size:32px; font-weight:700; color:var(--azul-oscuro); }
.offer-card .label{ font-size:12.5px; color:#64748B; margin-top:4px; margin-bottom:16px; }
.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linea-dark); border:1px solid var(--linea-dark); border-radius:14px; overflow:hidden; margin-top:36px; position:relative; }
@media (max-width:760px){ .metrics{ grid-template-columns:1fr 1fr; } }
.metric{ background:rgba(248,250,252,0.03); padding:28px 20px; }
.metric b{ display:block; font-family:'Space Grotesk'; font-size:26px; color:var(--naranja); font-feature-settings:"tnum"; }
.metric span{ font-size:12px; color:rgba(248,250,252,0.65); }

/* ============================================================
   Confirmación de entrega (foto + cita)
   ============================================================ */
.confirmacion{ padding:0; position:relative; overflow:hidden; background:var(--azul-oscuro); }
.confirmacion-grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:stretch; min-height:280px; }
.confirmacion-text{ padding:56px 0; display:flex; flex-direction:column; justify-content:center; }
.confirmacion-quote{ color:#fff; font-size:20px; font-family:'Space Grotesk'; font-weight:600; line-height:1.35; margin-bottom:16px; }
.confirmacion-sub{ color:rgba(248,250,252,0.65); font-size:14px; line-height:1.6; }
.confirmacion-photo{ position:relative; padding:24px 0; }
.confirmacion-photo img{ width:100%; height:100%; min-height:232px; object-fit:cover; border-radius:14px; display:block; box-shadow:0 20px 44px rgba(0,0,0,0.35); }
.confirmacion-photo::before{ content:''; position:absolute; top:24px; left:0; right:0; height:70px; background:linear-gradient(180deg, var(--azul-oscuro), transparent); border-radius:14px 14px 0 0; pointer-events:none; z-index:1; }
.confirmacion-photo::after{ content:''; position:absolute; inset:24px; border-radius:14px; box-shadow:inset 0 0 0 1px rgba(248,250,252,0.14); pointer-events:none; z-index:1; }
@media (max-width:820px){
  .confirmacion-grid{ grid-template-columns:1fr; gap:0; min-height:0; }
  .confirmacion-text{ padding:48px 0 24px; }
  .confirmacion-photo{ padding:0 0 48px; }
  .confirmacion-photo img{ min-height:200px; }
}

/* ============================================================
   Comparativa
   ============================================================ */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--linea); border-radius:16px; overflow:hidden; }
@media (max-width:760px){ .compare{ grid-template-columns:1fr; } }
.compare-head{ padding:20px 24px; font-family:'Space Grotesk'; font-weight:600; font-size:15px; min-height:64px; display:flex; align-items:center; }
.compare-head.trad{ background:#F1F5F9; color:#64748B; }
.compare-head.tio{ background:var(--azul); color:#fff; border-left:2px solid var(--azul); }
.compare-row{ padding:18px 24px; border-top:1px solid var(--linea); font-size:14px; line-height:1.5; display:flex; gap:10px; align-items:flex-start; min-height:88px; }
.compare-row.trad{ color:#64748B; }
.compare-row.tio{ color:var(--grafito); background:#fff; border-left:2px solid var(--azul); }
.compare-row .ico{ flex-shrink:0; margin-top:2px; font-size:13px; }
.compare-row.trad .ico{ color:#CBD5E1; }
.compare-row.tio .ico{ color:var(--naranja); font-weight:700; }
@media (max-width:760px){ .compare-row{ min-height:0; } }

/* ============================================================
   Pasos (cómo funciona)
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:860px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; }
.step .photo{ width:100%; height:200px; border-radius:12px; overflow:hidden; margin-bottom:18px; position:relative; }
.step .photo img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.step .photo .num{ position:absolute; top:12px; left:12px; background:var(--naranja); color:#fff; width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:700; font-size:14px; }
.step h3{ font-size:18px; margin-bottom:12px; }
.step p{ font-size:14px; color:#475569; line-height:1.6; }

/* ============================================================
   Zonas y tarifas
   ============================================================ */
.zonas-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:760px){ .zonas-wrap{ grid-template-columns:1fr; } }
.zona-card{ background:#fff; border:1px solid var(--linea); border-radius:14px; padding:26px; }
.zona-card .tag{ font-family:'Inter', sans-serif; font-weight:600; font-size:11px; color:var(--naranja); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:12px; display:block; }
.zona-card h3{ font-size:18px; margin-bottom:10px; }
.zona-card p{ font-size:14px; color:#475569; line-height:1.6; }
.modal-row{ display:flex; gap:14px; margin-top:22px; flex-wrap:wrap; }
.modal-pill{ background:#F1F5F9; border-radius:8px; padding:12px 16px; flex:1; min-width:180px; }
.modal-pill b{ display:block; font-size:14px; color:var(--azul-oscuro); margin-bottom:2px; }
.modal-pill span{ font-size:12.5px; color:#64748B; }

/* ============================================================
   Seguridad
   ============================================================ */
.security-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:860px){ .security-grid{ grid-template-columns:1fr; } }
.security-card{ background:#fff; color:var(--grafito); border:1px solid var(--linea); border-radius:14px; padding:28px; }
.security-card .tag{ font-family:'Inter', sans-serif; font-weight:600; font-size:11px; color:var(--azul); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:14px; display:block; }
.security-card h3{ color:var(--azul-oscuro); font-size:17px; margin-bottom:12px; }
.security-card p{ font-size:13.5px; color:#334155; line-height:1.6; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ max-width:760px; }
.faq-item{ border-bottom:1px solid var(--linea); }
.faq-item summary{ cursor:pointer; list-style:none; padding:20px 4px; font-family:'Space Grotesk'; font-weight:600; font-size:15.5px; color:var(--azul-oscuro); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-size:22px; color:var(--naranja); flex-shrink:0; font-weight:400; }
.faq-item[open] summary::after{ content:'–'; }
.faq-item p{ padding:0 4px 20px; font-size:14.5px; color:#475569; line-height:1.65; }

/* ============================================================
   Footer
   ============================================================ */
footer{ background:var(--azul-oscuro); color:rgba(248,250,252,0.6); padding:52px 0 28px; }
.footer-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px; padding-bottom:32px; border-bottom:1px solid var(--linea-dark); margin-bottom:22px; }
.footer-grid h4{ color:#fff; font-family:'Space Grotesk'; font-size:16px; margin-bottom:12px; }
.footer-grid p{ font-size:13.5px; max-width:280px; line-height:1.6; }
.footer-cta .btn{ margin-top:10px; }
.foot-bottom{ display:flex; justify-content:space-between; font-size:12.5px; flex-wrap:wrap; gap:10px; }

/* ============================================================
   Utilidades
   ============================================================ */
::selection{ background:var(--naranja); color:#fff; }
@media (prefers-reduced-motion: reduce){ .bubble{ animation:none; opacity:1; transform:none; } }

/* Clase añadida por js/main.js al hacer scroll dentro de una sección */
.nav-links a.active{ color:#fff; }