/* Adviesvinder — Energieke Regio. Scoped, vanilla, sin dependencias.
   Usa los tokens del sitio (style.css) con fallback para funcionar también standalone. */
[data-adviesvinder]{
  --av-green: var(--green, #97c01e);
  --av-green-dark: var(--green-dark, #7a9e18);
  --av-green-light: var(--green-light, #edf3e7);
  --av-text: var(--text, #363835);
  --av-muted: var(--text-muted, #5a5d58);
  --av-border: var(--border, #e2e8dc);
  --av-white: var(--white, #fff);
  --av-radius: var(--radius-lg, 16px);
  display:block;
}
.av-card{
  font-family: var(--font-body, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  color: var(--av-text);
  background: var(--av-white);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius);
  box-shadow: var(--shadow-md, 0 4px 20px rgba(0,0,0,.1));
  padding: clamp(1.25rem, 3vw, 2.25rem);
  max-width: 620px;
  margin: 0 auto;
}
.av-progress{ display:flex; gap:8px; margin-bottom:1rem; }
.av-dot{ height:5px; flex:1; border-radius:99px; background: var(--av-border); transition: background .22s ease; }
.av-dot.is-on{ background: var(--av-green); }
.av-stepmeta{ font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; color: var(--av-muted); margin:0 0 .35rem; }
.av-q{ font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height:1.25; margin:0 0 1.1rem; }
.av-options{ display:flex; flex-direction:column; gap:.6rem; }
.av-option{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%;
  text-align:left; cursor:pointer; font: inherit; font-weight:600;
  background: var(--av-white); color: var(--av-text);
  border:1.5px solid var(--av-border); border-radius: var(--radius, 8px);
  padding: .85rem 1rem; transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.av-option:hover, .av-option:focus-visible{ border-color: var(--av-green); background: var(--av-green-light); outline:none; }
.av-option:active{ transform: translateY(1px); }
.av-option.is-chosen{ border-color: var(--av-green); background: var(--av-green-light); }
.av-option svg{ color: var(--av-green); flex:none; }
.av-back{
  margin-top:1rem; background:none; border:none; cursor:pointer; font: inherit; font-weight:600;
  color: var(--av-muted); padding:.4rem 0;
}
.av-back:hover{ color: var(--av-green-dark); }
/* Resultado */
.av-rtag{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color: var(--av-green-dark); background: var(--av-green-light); padding:.3rem .65rem; border-radius:99px; margin-bottom:.9rem; }
.av-rintro{ color: var(--av-muted); margin:0 0 .35rem; }
.av-rtitle{ font-size: clamp(1.4rem, 3vw, 1.9rem); margin:0 0 .5rem; }
.av-rblurb{ margin:0 0 .8rem; }
.av-more{ display:inline-block; font-weight:700; color: var(--av-green-dark); margin-bottom:1rem; }
.av-more:hover{ text-decoration:underline; }
.av-onaf{ font-size:.85rem; color: var(--av-muted); background: var(--bg-light, #f8f8f8);
  border-left:3px solid var(--av-green); padding:.7rem .9rem; border-radius:6px; margin:0 0 1.3rem; }
/* Formulario */
.av-form{ display:flex; flex-direction:column; gap:.8rem; }
.av-field{ display:flex; flex-direction:column; gap:.25rem; }
.av-field label{ font-size:.82rem; font-weight:600; color: var(--av-muted); }
.av-field input{
  font: inherit; padding:.7rem .85rem; border:1.5px solid var(--av-border);
  border-radius: var(--radius, 8px); background: var(--av-white); color: var(--av-text); width:100%;
}
.av-field input:focus-visible{ outline:none; border-color: var(--av-green); box-shadow:0 0 0 3px var(--av-green-light); }
.av-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.av-consent{ display:flex; gap:.55rem; align-items:flex-start; font-size:.85rem; color: var(--av-muted); cursor:pointer; }
.av-consent input{ margin-top:.2rem; flex:none; width:16px; height:16px; accent-color: var(--av-green); }
.av-consent a{ color: var(--av-green-dark); text-decoration:underline; }
.av-err{ color:#b3261e; font-size:.85rem; margin:0; }
.av-actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.3rem; }
.av-btn{ font: inherit; font-weight:700; cursor:pointer; border-radius: var(--radius, 8px); padding:.8rem 1.3rem; border:1.5px solid transparent; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.av-btn--primary{ background: var(--av-green); color:#fff; }
.av-btn--primary:hover{ background: var(--av-green-dark); }
.av-btn--ghost{ background: var(--av-white); color: var(--av-green-dark); border-color: var(--av-border); }
.av-btn--ghost:hover{ border-color: var(--av-green); background: var(--av-green-light); }
.av-btn[disabled]{ opacity:.6; cursor:default; }
/* Gracias */
.av-thanks{ text-align:center; }
.av-check{ color: var(--av-green); display:flex; justify-content:center; margin-bottom:.6rem; }
.av-thanks h3{ margin:0 0 .4rem; }
.av-thanks p{ color: var(--av-muted); margin:0 0 1rem; }
@media (prefers-reduced-motion: reduce){
  .av-dot, .av-option, .av-btn{ transition:none; }
}
/* Teaser (gancho ligero hacia el wizard) */
.av-teaser{
  display:flex; align-items:center; justify-content:space-between; gap:1rem 1.5rem; flex-wrap:wrap;
  margin:2rem 0; padding:1rem 1.4rem;
  background: var(--green-light,#edf3e7); border:1px solid var(--border,#e2e8dc);
  border-left:4px solid var(--green,#97c01e); border-radius: var(--radius,8px);
  color: var(--text,#363835); font-family: var(--font-body, system-ui, sans-serif);
  transition: box-shadow .18s ease, transform .18s ease;
}
.av-teaser:hover{ box-shadow: var(--shadow-sm,0 2px 8px rgba(0,0,0,.06)); transform: translateY(-1px); }
.av-teaser__txt{ font-size:1rem; line-height:1.5; }
.av-teaser__btn{
  flex:none; font-weight:700; white-space:nowrap; color:#fff;
  background: var(--green,#97c01e); padding:.6rem 1.1rem; border-radius: var(--radius,8px);
}
.av-teaser:hover .av-teaser__btn{ background: var(--green-dark,#7a9e18); }
@media (prefers-reduced-motion: reduce){ .av-teaser{ transition:none; } }