/* ============================================================================
   GoVoomy · Landing CLIENTES — estilos específicos
   ----------------------------------------------------------------------------
   Mobile-first. Reutiliza tokens y componentes de ../shared/govoomy-brand.css
   (colores, .gv-card, .gv-phone, botones, etc.). Aquí solo va lo propio de
   esta landing: hero con phones, badges de tienda, íconos de categoría,
   pantallas de la app dentro de .gv-phone, pasos, tracking, opiniones,
   sección de descarga, QR y FAQ.
   ========================================================================== */

/* ---------- Iconos de categoría (SVG via mask, color de marca) ----------
   Un único sprite construido con máscaras: cada modificador cambia el dibujo.
   Heredan currentColor del contenedor para verse naranja/navy según contexto. */
.gv-i {
  --_url: none;
  display: inline-block;
  width: 26px; height: 26px;
  background: currentColor;
  -webkit-mask: var(--_url) center / contain no-repeat;
          mask: var(--_url) center / contain no-repeat;
  flex: none;
}
.gv-i--food  { --_url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3v7a2 2 0 0 0 2 2 2 2 0 0 0 2-2V3M6 3v18M16 3c-1.7 0-3 2-3 5s1 4 3 4v9'/%3E%3C/svg%3E"); }
.gv-i--rx    { --_url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3C/svg%3E"); }
.gv-i--cart  { --_url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2 3h3l2.4 12.3a1.5 1.5 0 0 0 1.5 1.2h8.3a1.5 1.5 0 0 0 1.5-1.2L21 7H6'/%3E%3C/svg%3E"); }
.gv-i--pet   { --_url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='6' cy='10' r='2'/%3E%3Ccircle cx='10' cy='6' r='2'/%3E%3Ccircle cx='14' cy='6' r='2'/%3E%3Ccircle cx='18' cy='10' r='2'/%3E%3Cpath d='M12 11c-2.5 0-4.5 2-5.2 4.2C6.2 17 7.4 18.5 9 18.5c1 0 2-.6 3-.6s2 .6 3 .6c1.6 0 2.8-1.5 2.2-3.3C16.5 13 14.5 11 12 11Z'/%3E%3C/svg%3E"); }
.gv-i--water { --_url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c0 0-6 6.4-6 11a6 6 0 0 0 12 0c0-4.6-6-11-6-11Z'/%3E%3C/svg%3E"); }
.gv-i--gas   { --_url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='7' width='12' height='14' rx='3'/%3E%3Cpath d='M10 7V5h4v2M12 3v2'/%3E%3C/svg%3E"); }
.gv-i--box   { --_url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 7 9-4 9 4v10l-9 4-9-4z'/%3E%3Cpath d='M3 7l9 4 9-4M12 11v10'/%3E%3C/svg%3E"); }
.gv-i--task  { --_url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V3h6v1M8.5 10l1.5 1.5L13 8M8.5 16l1.5 1.5L13 14'/%3E%3C/svg%3E"); }

/* ============================== HERO ============================== */
.gv-hero { padding-top: clamp(36px, 6vw, 64px); overflow: clip; }
.gv-hero__grid {
  display: grid;
  gap: clamp(36px, 6vw, 56px);
  align-items: center;
}
.gv-hero__copy h1 { margin-top: 4px; }
.gv-hero__copy .gv-lead { max-width: 46ch; }

/* manchas de fondo */
.gv-hero__blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; z-index: -1; pointer-events: none; }
.gv-hero__blob--warm { width: 360px; height: 360px; top: -80px; right: -60px;
  background: radial-gradient(circle, rgba(245,165,36,.55), transparent 70%); }
.gv-hero__blob--cool { width: 320px; height: 320px; bottom: -120px; left: -80px;
  background: radial-gradient(circle, rgba(46,124,184,.40), transparent 70%); }

/* badges de tienda */
.gv-stores { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 22px; }
.gv-store {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 10px 18px; border-radius: var(--gv-r-md);
  background: var(--gv-navy-900); color: #fff;
  box-shadow: var(--gv-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.gv-store:hover { transform: translateY(-2px); box-shadow: var(--gv-shadow-md); color: #fff; }
.gv-store__ico { display: grid; place-items: center; color: #fff; }
.gv-store__txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.gv-store__txt small { font-size: .68rem; opacity: .8; }
.gv-store__txt b { font-family: var(--gv-font-display); font-size: 1.05rem; }
.gv-store--dark { background: #fff; color: var(--gv-navy-900); }
.gv-store--dark:hover { color: var(--gv-navy-900); }
.gv-store--dark .gv-store__ico { color: var(--gv-navy-900); }

/* chips del hero */
.gv-hero__chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* arte del hero: dos phones superpuestos */
.gv-hero__art { position: relative; display: flex; justify-content: center; align-items: center; min-height: 540px; }
.gv-phone--front { position: relative; z-index: 2; }
.gv-phone--back  { position: absolute; z-index: 1; top: 0; right: 4%; transform: rotate(6deg) scale(.92); opacity: .96; }

/* ---------- Pantallas de la app (HTML dentro del phone) ---------- */
.gv-app {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: 30px 14px 14px;
  background: var(--gv-paper);
  font-family: var(--gv-font-body);
  color: var(--gv-ink-900);
}
.gv-app__top { display: flex; align-items: center; justify-content: space-between; }
.gv-app__top small { display: block; font-size: .62rem; color: var(--gv-ink-400); }
.gv-app__top strong { font-size: .82rem; color: var(--gv-navy-900); }
.gv-app__avatar, .gv-app__rider span {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gv-grad-cool); color: #fff; font-weight: 700; font-size: .8rem; flex: none;
}
.gv-app__search {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--gv-line); border-radius: var(--gv-r-pill);
  padding: 9px 12px; font-size: .76rem; color: var(--gv-ink-400);
}
.gv-app__cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gv-app__cat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #fff; border: 1px solid var(--gv-line); border-radius: var(--gv-r-sm);
  padding: 8px 4px; font-size: .58rem; color: var(--gv-ink-700);
}
.gv-app__cat .gv-i { width: 20px; height: 20px; color: var(--gv-orange-600); }
.gv-app__promo {
  background: var(--gv-grad-warm); color: #fff; border-radius: var(--gv-r-sm);
  padding: 9px 12px; font-size: .72rem; font-weight: 700; text-align: center;
}
.gv-app__store {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--gv-line); border-radius: var(--gv-r-md); padding: 8px;
}
.gv-app__store-img { width: 46px; height: 46px; border-radius: 10px; flex: none;
  background: linear-gradient(135deg, #FFD9A0, #F39219); }
.gv-app__store-info strong { display: block; font-size: .78rem; color: var(--gv-navy-900); }
.gv-app__store-info small { font-size: .64rem; color: var(--gv-ink-500); }
.gv-app__cta {
  margin-top: auto; border: none; cursor: default;
  background: var(--gv-grad-warm); color: #fff; font-family: var(--gv-font-display);
  font-weight: 700; font-size: .82rem; padding: 11px; border-radius: var(--gv-r-pill);
}

/* pantalla de tracking */
.gv-app--track { padding: 30px 0 0; gap: 0; }
.gv-app__bar { padding: 4px 14px 10px; font-size: .74rem; font-weight: 700; color: var(--gv-navy-900); text-align: center; }
.gv-map { width: 100%; flex: 1; min-height: 0; }
.gv-app__eta {
  display: flex; align-items: center; gap: 10px;
  background: #fff; padding: 12px 14px; box-shadow: 0 -6px 18px rgba(16,36,62,.08);
}
.gv-app__eta strong { display: block; font-size: .78rem; color: var(--gv-navy-900); }
.gv-app__eta small { font-size: .66rem; color: var(--gv-ink-500); }

/* ============================== CATEGORÍAS ============================== */
.gv-cats { margin-top: clamp(34px, 5vw, 52px); }
.gv-cat-tile { text-align: center; }
.gv-cat-tile__ico {
  width: 60px; height: 60px; margin: 0 auto 16px;
  display: grid; place-items: center; border-radius: 18px;
  background: var(--gv-orange-50); color: var(--gv-orange-600);
}
.gv-cat-tile:nth-child(2n) .gv-cat-tile__ico { background: rgba(46,124,184,.12); color: var(--gv-blue-500); }
.gv-cat-tile__ico .gv-i { width: 28px; height: 28px; }
.gv-cat-tile h3 { font-size: 1.12rem; margin-bottom: .25em; }
.gv-cat-tile p { font-size: .92rem; }

/* ============================== STATS ============================== */
.gv-stats > div { padding: 8px; }

/* ============================== CÓMO FUNCIONA ============================== */
.gv-steps { margin-top: clamp(34px, 5vw, 52px); }
.gv-step { text-align: center; position: relative; }
.gv-step__num {
  width: 38px; height: 38px; margin: 0 auto 6px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--gv-grad-warm); color: #fff; box-shadow: var(--gv-shadow-warm);
  font-family: var(--gv-font-display); font-weight: 800;
}
.gv-step h3 { margin-top: 18px; }
.gv-step p { color: var(--gv-ink-500); max-width: 30ch; margin-inline: auto; }

/* phones mini de los pasos */
.gv-phone--mini { width: 168px; aspect-ratio: 168 / 320; padding: 8px; border-radius: 26px; margin: 14px auto 0; }
.gv-phone--mini::before { width: 64px; height: 14px; top: 10px; }
.gv-phone--mini .gv-phone__screen { border-radius: 20px; }
.gv-app--mini { padding: 22px 10px 10px; }
.gv-app__cats--mini { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gv-app__cats--mini .gv-app__cat { padding: 12px 4px; }
.gv-app__cats--mini .gv-app__cat .gv-i { width: 22px; height: 22px; }
.gv-app__cat--on { border-color: var(--gv-orange-500); background: var(--gv-orange-50); box-shadow: 0 0 0 2px rgba(243,146,25,.25); }
.gv-app--pay { justify-content: flex-start; gap: 12px; }
.gv-app__card {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--gv-line); border-radius: var(--gv-r-md);
  padding: 14px; font-weight: 700; color: var(--gv-navy-900); font-size: .82rem;
}
.gv-app__line { display: flex; justify-content: space-between; align-items: center;
  padding: 4px 4px 0; font-size: .8rem; color: var(--gv-ink-500); }
.gv-app__line b { font-family: var(--gv-font-display); font-size: 1.1rem; color: var(--gv-navy-900); }
.gv-map--mini { flex: none; height: 130px; border-radius: 0; }

/* ============================== TRACKING ============================== */
.gv-track { display: grid; gap: clamp(32px, 5vw, 52px); align-items: center; }
.gv-track__art { display: flex; justify-content: center; }
.gv-track__list { display: grid; gap: 12px; margin-top: 22px; }
.gv-track__list li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--gv-ink-700); }
.gv-track__list svg { color: var(--gv-success); flex: none; }

/* ============================== OPINIONES ============================== */
.gv-reviews { margin-top: clamp(34px, 5vw, 52px); }
.gv-review { display: flex; flex-direction: column; gap: 12px; }
.gv-review__stars { color: var(--gv-orange-500); letter-spacing: 2px; font-size: 1.05rem; }
.gv-review blockquote { margin: 0; font-size: 1.02rem; color: var(--gv-ink-700); line-height: 1.55; }
.gv-review__by { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.gv-review__by strong { display: block; color: var(--gv-navy-900); font-size: .95rem; }
.gv-review__by small { color: var(--gv-ink-400); font-size: .82rem; }
.gv-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff; font-weight: 800;
  font-family: var(--gv-font-display); background: var(--gv-grad-warm);
}
.gv-avatar--alt  { background: var(--gv-grad-cool); }
.gv-avatar--cool { background: linear-gradient(135deg, #4A9FD9, #1F4F8C); }

/* ============================== DESCARGAR ============================== */
.gv-download { display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; }
.gv-download__art { display: flex; justify-content: center; }

/* QR */
.gv-qr { display: inline-flex; align-items: center; gap: 14px; margin: 4px 0 24px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--gv-r-md); padding: 12px 16px; }
.gv-qr__img { width: 84px; height: 84px; flex: none; border-radius: 8px; }
.gv-qr span { font-weight: 600; color: #D7E3F2; font-size: .95rem; max-width: 12ch; }

/* mini formulario de descarga */
.gv-dl-form { max-width: 480px; }
.gv-dl-form .gv-form__fields {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; align-items: end;
}
.gv-dl-form .gv-form__fields .gv-btn { grid-column: 1 / -1; }
.gv-dl-form .gv-field { margin-bottom: 0; }
.gv-dark .gv-dl-form label { color: #C7D6E8; }

/* badges en footer/descarga, tamaño chico */
.gv-stores--mini { flex-direction: column; gap: 10px; margin: 0; }
.gv-store--mini { padding: 8px 14px; }
.gv-store--mini .gv-store__txt small { font-size: .6rem; }
.gv-store--mini .gv-store__txt b { font-size: .92rem; }
.gv-footer .gv-store--dark { background: rgba(255,255,255,.08); color: #fff; }
.gv-footer .gv-store--dark .gv-store__ico { color: #fff; }
.gv-footer .gv-store--dark:hover { background: rgba(255,255,255,.16); color: #fff; }

/* ============================== FAQ ============================== */
.gv-faq { margin-top: 28px; display: grid; gap: 12px; }
.gv-faq__item {
  background: #fff; border: 1px solid var(--gv-line); border-radius: var(--gv-r-md);
  padding: 4px 20px; box-shadow: var(--gv-shadow-sm);
}
.gv-faq__item summary {
  cursor: pointer; list-style: none; padding: 16px 30px 16px 0; position: relative;
  font-family: var(--gv-font-display); font-weight: 700; color: var(--gv-navy-900); font-size: 1.02rem;
}
.gv-faq__item summary::-webkit-details-marker { display: none; }
.gv-faq__item summary::after {
  content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--gv-orange-500); transition: transform .2s ease;
}
.gv-faq__item[open] summary::after { content: '\2212'; }
.gv-faq__item p { padding: 0 0 16px; margin: 0; color: var(--gv-ink-500); }

/* ============================== RESPONSIVE ============================== */
/* Tablet en adelante: hero y bloques de 2 columnas */
@media (min-width: 861px) {
  .gv-hero__grid { grid-template-columns: 1.05fr .95fr; }
  .gv-track      { grid-template-columns: .9fr 1.1fr; }
  .gv-download   { grid-template-columns: 1.1fr .9fr; }
}

/* Móvil: phones más compactos y un solo phone de fondo discreto */
@media (max-width: 860px) {
  .gv-hero__art { min-height: 480px; }
  .gv-phone { width: 248px; }
  .gv-phone--back { right: 0; transform: rotate(6deg) scale(.82); opacity: .85; }
}
@media (max-width: 600px) {
  .gv-stores { gap: 10px; }
  .gv-store { flex: 1 1 auto; justify-content: center; }
  .gv-stores .gv-btn--outline { flex-basis: 100%; }
  .gv-hero__art { min-height: 430px; }
  .gv-phone { width: 220px; }
  .gv-phone--back { display: none; } /* en móvil dejamos solo la home, más limpio */
  .gv-dl-form .gv-form__fields { grid-template-columns: 1fr; }
  .gv-qr { width: 100%; }
}

/* Escritorio amplio: phones del hero un poco más grandes */
@media (min-width: 1280px) {
  .gv-phone--front { width: 300px; }
  .gv-phone--back  { width: 290px; right: -2%; }
}