/* Very Taxi · página de inicio
   Idea: el costado amarillo de un taxi con su franja de cuadros, y la conversación real del bot. */
:root {
  --taxi: #FFC72C;
  --taxi-deep: #F2B200;
  --asphalt: #1A1A1A;
  --white: #FFFFFF;
  --wa: #25D366;
  --wa-dark: #128C4B;
  --chat-bg: #ECE5DD;
  --bubble-me: #D9FDD3;
  --muted: #4A4A4A;
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--asphalt); font: 400 1.0625rem/1.55 var(--body); }
img { max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible, .cta:focus-visible { outline: 3px solid var(--asphalt); outline-offset: 3px; }

/* ---------- Barra superior ---------- */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px clamp(16px, 4vw, 48px); padding-top: max(10px, env(safe-area-inset-top));
  background: var(--asphalt); color: var(--white);
}
.bar-logo img { display: block; height: 40px; width: auto; }
.bar-nav { display: flex; align-items: center; gap: clamp(12px, 3vw, 28px); font-weight: 600; font-size: 0.95rem; }
.bar-nav a { text-decoration: none; }
.bar-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bar-login { border: 2px solid var(--taxi); color: var(--taxi); padding: 6px 14px; border-radius: 999px; }
.bar a:focus-visible { outline-color: var(--taxi); }

/* ---------- Portada: el costado del taxi ---------- */
.hero {
  background: var(--taxi);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center;
  gap: clamp(32px, 6vw, 80px);
  padding: clamp(40px, 7vw, 96px) clamp(16px, 6vw, 96px) clamp(48px, 7vw, 88px);
}
.hero h1 {
  font: 800 clamp(3rem, 8.5vw, 6.5rem)/0.88 var(--cond);
  letter-spacing: -0.01em; margin: 0 0 24px; max-width: 9ch;
}
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 34em; margin: 0 0 32px; color: #2B2B2B; }
.cta {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--wa); color: var(--asphalt); text-decoration: none;
  font: 600 1.15rem/1 var(--body); padding: 18px 26px; border-radius: 999px;
  box-shadow: 0 4px 0 var(--wa-dark);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--wa-dark); }
.cta:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--wa-dark); }
.hero-number { margin: 16px 0 0; font-size: 0.95rem; }
.hero-number a { font-weight: 600; }

/* ---------- Teléfono con la conversación ---------- */
.phone {
  justify-self: center; width: min(100%, 360px);
  background: var(--chat-bg); border: 10px solid var(--asphalt); border-radius: 36px;
  overflow: hidden; box-shadow: 14px 14px 0 rgba(26, 26, 26, 0.18);
}
.phone-top { display: flex; align-items: center; gap: 10px; background: #075E54; color: var(--white); padding: 12px 14px; }
.phone-top img { border-radius: 50%; }
.phone-top strong { display: block; font-weight: 600; line-height: 1.1; }
.phone-top span { font-size: 0.78rem; opacity: 0.85; }
.chat { display: flex; flex-direction: column; gap: 8px; padding: 16px 12px 20px; min-height: 420px; font-size: 0.92rem; line-height: 1.4; }
.msg {
  margin: 0; max-width: 85%; padding: 8px 11px; border-radius: 10px;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
  animation: pop 0.35s ease-out both; animation-delay: var(--d, 0s);
}
.msg.bot { align-self: flex-start; background: var(--white); border-top-left-radius: 2px; }
.msg.me { align-self: flex-end; background: var(--bubble-me); border-top-right-radius: 2px; }
.msg.loc { font-weight: 500; }
.msg-btn { display: block; margin-top: 8px; padding-top: 7px; border-top: 1px solid #E3E3E3; text-align: center; color: #027EB5; font-weight: 600; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---------- Franja de cuadros del taxi ---------- */
.checkers {
  height: 28px;
  background: repeating-conic-gradient(var(--asphalt) 0 25%, var(--white) 0 50%) 0 0 / 28px 28px;
}

/* ---------- Cómo funciona ---------- */
.steps { padding: clamp(56px, 8vw, 112px) clamp(16px, 6vw, 96px); max-width: 1240px; margin: 0 auto; }
.steps h2, .drivers h2 { font: 800 clamp(2.25rem, 5vw, 3.75rem)/0.95 var(--cond); margin: 0 0 40px; }
.steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); counter-reset: paso; }
.steps li { counter-increment: paso; position: relative; padding-top: 72px; }
.steps li::before {
  content: counter(paso);
  position: absolute; top: 0; left: 0; width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--taxi); color: var(--asphalt); border: 3px solid var(--asphalt); border-radius: 50%;
  font: 800 1.9rem/1 var(--cond);
}
.steps h3 { font: 600 1.6rem/1.1 var(--cond); margin: 0 0 8px; }
.steps p { margin: 0; color: var(--muted); max-width: 30em; }

/* ---------- Para taxistas ---------- */
.drivers { background: var(--asphalt); color: var(--white); padding: clamp(56px, 8vw, 112px) clamp(16px, 6vw, 96px); }
.drivers-inner { max-width: 1040px; margin: 0 auto; }
.drivers h2 { color: var(--taxi); margin-bottom: 16px; }
.drivers-lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin: 0 0 40px; max-width: 36em; color: #DADADA; }
.perks { list-style: none; margin: 0 0 44px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; }
.perks li { border-left: 4px solid var(--taxi); padding-left: 16px; color: #CFCFCF; }
.perks strong { display: block; color: var(--white); font-weight: 600; font-size: 1.1rem; margin-bottom: 4px; }
.drivers-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-yellow, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  padding: 14px 24px; border-radius: 999px; font-weight: 600; text-decoration: none;
}
.btn-yellow { background: var(--taxi); color: var(--asphalt); }
.btn-yellow:hover { background: var(--taxi-deep); }
.btn-ghost { border: 2px solid #5A5A5A; color: var(--white); }
.btn-ghost:hover { border-color: var(--white); }
.drivers a:focus-visible { outline-color: var(--taxi); }

/* ---------- Pie ---------- */
.foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px;
  background: #000000; color: #BDBDBD; padding: 40px clamp(16px, 6vw, 96px) max(40px, env(safe-area-inset-bottom));
  border-top: 4px solid var(--taxi); font-size: 0.95rem;
}
.foot img { width: 220px; }
.foot p { margin: 0 0 6px; }
.foot a { color: var(--white); font-weight: 600; }
.foot a:focus-visible { outline-color: var(--taxi); }
.foot-legal { font-size: 0.85rem; color: #8A8A8A; }

/* ---------- Celular ---------- */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero h1 { max-width: 10ch; }
  .steps ol, .perks { grid-template-columns: 1fr; }
  .chat { min-height: 0; }
}
@media (max-width: 420px) {
  .bar-nav a:not(.bar-login) { display: none; }
  .cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .msg { animation: none; }
  .cta { transition: none; }
}