/* ===========================================================================
   theme.valuetraffic.css · TEMA DE MARCA (ValueTraffic)
   ---------------------------------------------------------------------------
   Esto es lo ÚNICO que cambia entre marcas de la Familia Value.
   Clonado desde theme.valuereview.css:
     1. 3 colores de acento/tinte (abajo)
     2. Símbolo en src/partials/symbol.html (estrella → pin)
     3. Tagline en config/brand.valuetraffic.json ("llena tu local")
   El resto (system.vr.css, JS, partials) NO se toca.

   Paleta de acento/tinte oficial:
     ValueReview   #F08C00 / #FDEFDD
     ValueLocal    #FF6F59 / #FDECE8
     ValueTraffic  #6D5BD0 / #ECEAF8   (este archivo)
   =========================================================================== */
.vr{
  --vr-accent:#6D5BD0;     /* acento principal (violeta ValueTraffic) */
  --vr-accent-dk:#6454BF;  /* acento oscuro (hover, texto sobre tinte) ≈ -8% */
  --vr-tint:#ECEAF8;       /* tinte suave (fondos de realce) */
}

/* ===========================================================================
   Componentes propios de ValueTraffic (no existen en ValueReview).
   Viven aquí, en el tema de marca; system.vr.css no se toca.
   =========================================================================== */

/* --- Palabra rotativa (sector) ------------------------------------------- */
.vt-rotate{display:inline-block}
.vt-rotate-ink{color:var(--vr-accent-dk);font-weight:600}

/* --- HERO · mockup de búsqueda local (móvil) ----------------------------- */
.vt-serp-wrap{width:300px;max-width:100%;margin:0 auto}
.vr-phone-screen.vt-serp{background:#fff;padding:14px 13px 16px}
.vt-serp-bar{display:flex;align-items:center;gap:9px;background:#F1F3F4;border-radius:999px;
  padding:10px 14px;font-size:.86rem;color:#2E3A41;font-weight:500}
.vt-serp-bar svg{width:16px;height:16px;flex:none}
.vt-serp-q{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vt-serp-q .vt-rotate{color:var(--vr-accent-dk);font-weight:700}
.vt-serp-map{position:relative;height:92px;margin:12px 0;border-radius:14px;overflow:hidden;background:#E7EDE9;
  background-image:
    linear-gradient(90deg,transparent 46%,#d6ded8 46%,#d6ded8 51%,transparent 51%),
    linear-gradient(22deg,transparent 58%,#d6ded8 58%,#d6ded8 62%,transparent 62%)}
.vt-map-pin{position:absolute;width:9px;height:9px;border-radius:50%;background:#9aa7a2;
  transform:translate(-50%,-50%);box-shadow:0 0 0 3px rgba(255,255,255,.7)}
.vt-map-pin-you{left:46%;top:40%;width:auto;height:auto;background:none;box-shadow:none;color:var(--vr-accent)}
.vt-map-pin-you svg{width:30px;height:30px;display:block;filter:drop-shadow(0 3px 4px rgba(0,0,0,.28))}
.vt-serp-list{list-style:none;display:grid;gap:8px}
.vt-serp-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;
  background:#F7F8F8;border:1px solid #ECEEED}
.vt-serp-item.is-you{background:var(--vr-tint);border:1.5px solid var(--vr-accent)}
.vt-rank{flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  font-family:var(--vr-logo);font-size:.72rem;font-weight:700;background:var(--vr-accent);color:#fff}
.vt-rank-mut{background:#DFE4E2;color:#5C6B73}
.vt-serp-info{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.vt-serp-name{font-size:.84rem;font-weight:600;color:#2E3A41;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vt-serp-meta{font-size:.68rem;color:#7C8884;white-space:nowrap}
.vt-stars{color:#FBBC04;letter-spacing:.5px}
.vt-stars-mut{color:#C9B27A}
.vt-serp-tag{flex:none;font-size:.62rem;font-weight:700;color:#fff;background:var(--vr-accent);border-radius:999px;padding:3px 9px}

/* --- Bloque "Qué movemos" · palancas ------------------------------------- */
.vt-lead-narrow{max-width:40em}
.vt-levers{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:42px}
.vt-lever{background:var(--vr-surface);border:1px solid var(--vr-line);border-radius:20px;padding:28px 26px}
.vt-lever-feat{grid-column:1 / -1;background:var(--vr-tint);border-color:var(--vr-accent)}
.vt-lever-kick{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--vr-accent-dk);margin-bottom:9px}
.vt-lever h3{margin-bottom:10px;font-size:1.12rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vt-lever p{font-size:.99rem}
.vt-spec-badge{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:#fff;background:var(--vr-accent);border-radius:999px;padding:4px 10px;white-space:nowrap}
.vt-pull-wide{max-width:52em;margin-top:46px}

/* --- Bloque "Cómo trabajamos" -------------------------------------------- */
.vt-tint{background:var(--vr-tint)}
.vt-two-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}

/* --- Contacto · alternativa WhatsApp ------------------------------------- */
.vt-or{margin-top:18px;font-size:.98rem;color:var(--vr-muted)}
.vt-or a{color:#25D366;font-weight:600;text-decoration:none}
.vt-or a:hover{color:#1DA851;text-decoration:underline}

/* --- Fix: el CTA del nav heredaba el color de texto de .vr-nav-links a
   (tinta) sobre fondo violeta. Forzamos blanco (sin tocar system.vr.css). --- */
.vr-nav-links a.vr-btn-primary,
.vr-nav-links a.vr-btn-primary:hover{color:#fff}

/* --- "Qué movemos" como acordeón (reutiliza .vr-acc del sistema) --------- */
.vt-acc-levers{margin-top:40px}
.vt-acc-levers summary{align-items:center}
.vt-acc-head{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.vt-acc-head .vt-lever-kick{margin-bottom:0}
.vt-acc-title{font-family:var(--vr-body);font-weight:600;font-size:1.08rem;color:var(--vr-ink);letter-spacing:0}
.vt-acc-sub{font-weight:400;font-size:.92rem;color:var(--vr-muted);letter-spacing:0;line-height:1.35}
.vt-acc-levers .vr-acc-body{padding-left:24px}
.vt-acc-levers details[open] > summary .vt-acc-title{color:var(--vr-accent-dk)}

@media (max-width:860px){
  .vt-levers,.vt-two-cards{grid-template-columns:1fr}
  .vt-lever-feat{grid-column:auto}
}
@media (max-width:560px){
  .vt-acc-levers summary .vt-spec-badge{display:none}
}