/* ===========================================================================
   theme.valuelocal.css · TEMA de marca ValueLocal (acento coral)
   ---------------------------------------------------------------------------
   Sobre el sistema común (system.vr.css). Aquí viven SOLO:
     1) los colores de marca (--vr-accent / --vr-accent-dk / --vr-tint)
     2) un puñado de helpers de layout propios de ValueLocal (prefijo .vl-)
        que el sistema común no trae (rejillas de 4, tarjetas de solución,
        pilares del hero, opciones del formulario).
   ValueLocal NO usa tagline ni símbolo: el wordmark con su punto coral basta.
   =========================================================================== */

/* ---------- 1 · Colores de marca ---------------------------------------- */
.vr{
  --vr-accent:#FF6F59;     /* coral ValueLocal */
  --vr-accent-dk:#E85F49;  /* hover / texto sobre claro (~8% más oscuro) */
  --vr-tint:#FDECE8;       /* tinte suave para fondos de sección */
}

/* ---------- 2 · Helpers de layout ValueLocal ---------------------------- */

/* Sección con fondo tinte suave (alterna con el blanco/paper) */
.vl-soft{background:var(--vr-tint)}

/* Entradilla bajo un titular de sección */
.vl-intro{max-width:46em;margin-top:6px}

/* Salto de línea forzado SOLO en pantallas anchas (en móvil el texto fluye solo) */
.vl-br{display:none}
@media (min-width:700px){ .vl-br{display:inline} }

/* Recurso de marca: palabra antigua tachada en coral + palabra nueva */
.vl-strike{text-decoration:line-through;text-decoration-color:var(--vr-accent);text-decoration-thickness:2px;color:var(--vr-muted)}
.vl-new{color:var(--vr-accent-dk);font-weight:600}

/* HERO · columna derecha = tres pilares (sobre el fondo Tinta) */
.vl-pillars{list-style:none;display:grid;gap:20px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:30px 28px}
.vl-pillars li{display:flex;gap:14px;align-items:flex-start}
.vl-pillars .pdot{flex:none;width:11px;height:11px;border-radius:50%;background:var(--vr-accent);
  margin-top:7px;box-shadow:0 0 0 4px rgba(255,111,89,.18)}
.vl-pillars b{display:block;font-family:var(--vr-logo);font-weight:600;color:#fff;font-size:1.06rem;letter-spacing:-.01em}
.vl-pillars span{color:rgba(255,255,255,.7);font-size:.95rem;line-height:1.5}

/* BLOQUE 3 · «Qué hacemos» = acordeón SIN numerar (no implica orden: se empieza
   por donde más valor aporta). Marcador = punto coral (firma de la familia). */
.vr-acc{margin-top:44px}
.vl-acc-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--vr-accent);box-shadow:0 0 0 4px rgba(255,111,89,.15)}
.vl-acc-tag{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--vr-accent)}
.vl-card-cta{display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-weight:600;font-size:.92rem;color:var(--vr-accent-dk);text-decoration:none;transition:gap .15s ease}
.vl-card-cta::after{content:"→"}
.vl-card-cta:hover{gap:10px}

/* BLOQUE 4 · «Soluciones especializadas» = tres tarjetas */
.vl-sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:42px;align-items:stretch}
.vl-sol{display:flex;flex-direction:column}
.vl-sol .vr-wm{font-size:1.25rem}
.vl-sol-area{display:block;font-size:.8rem;font-weight:600;color:var(--vr-muted);margin-top:4px}
.vl-sol-sub{font-size:.96rem;color:var(--vr-ink);font-weight:500;margin:12px 0 0}
.vl-sol p{font-size:.97rem;margin-top:10px}
.vl-sol .vr-feat{margin-top:16px;gap:12px}
.vl-sol .vr-feat li{font-size:.95rem}
.vl-sol-foot{margin-top:auto;padding-top:20px}
.vl-badge{display:inline-block;font-size:.64rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--vr-accent-dk);background:var(--vr-tint);border-radius:999px;padding:5px 11px;margin-bottom:14px}
.vl-badge.soon{color:var(--vr-muted);background:var(--vr-paper);border:1px solid var(--vr-line)}
/* botón secundario (contorno coral) — sistema base solo trae primary/light */
.vl-btn-outline{background:transparent;border:1.5px solid var(--vr-accent);color:var(--vr-accent-dk)}
.vl-btn-outline:hover{background:var(--vr-tint);transform:translateY(-2px)}
/* desplegable «Ver detalles» dentro de la tarjeta (NO es el acordeón .vr-acc:
   sin número, sin barra, sin caja — solo un enlace de texto que revela el detalle) */
.vl-more{margin-top:14px}
.vl-more > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font-weight:600;font-size:.86rem;color:var(--vr-accent-dk);user-select:none;-webkit-tap-highlight-color:transparent}
.vl-more > summary::-webkit-details-marker{display:none}
.vl-more > summary:hover{color:var(--vr-accent)}
.vl-more > summary .chev{font-size:.62rem;line-height:1;transition:transform .2s ease}
.vl-more[open] > summary .chev{transform:rotate(180deg)}
.vl-more .lbl-less{display:none}
.vl-more[open] .lbl-more{display:none}
.vl-more[open] .lbl-less{display:inline}
.vl-more-body{margin-top:6px}

/* BLOQUE 6 · formulario — selección múltiple de interés */
.vl-interests{display:grid;gap:10px;margin-top:2px}
/* selector con la especificidad suficiente para ganar a `.vr-field label{display:block}`
   del sistema (si no, el gap no se aplica y el texto pega con la casilla) */
.vl-interests .vl-opt{display:flex;gap:11px;align-items:flex-start;margin:0;border:1px solid var(--vr-line);border-radius:11px;
  padding:11px 13px;cursor:pointer;background:var(--vr-paper);transition:border-color .15s ease,background .15s ease}
.vl-opt:hover{border-color:var(--vr-accent)}
.vl-opt input{margin-top:1px;width:17px;height:17px;flex:none;accent-color:var(--vr-accent)}
.vl-opt span{font-size:.93rem;color:var(--vr-ink);font-weight:500}
.vl-opt:has(input:checked){border-color:var(--vr-accent);background:var(--vr-tint)}
/* alternativa de WhatsApp bajo el formulario */
.vl-form-alt{margin:18px auto 0;max-width:560px;text-align:center;font-size:.95rem;color:var(--vr-muted)}
.vl-form-alt a{color:#25D366;font-weight:600;text-decoration:none}            /* verde WhatsApp */
.vl-form-alt a:hover{color:#1da851;text-decoration:underline;text-underline-offset:3px}

@media (max-width:860px){.vl-sol-grid{grid-template-columns:1fr}}