/* =========================================================
   Grupo WÖL — Componentes v2026.1
   Requiere tokens/tokens.css. Prefijo: .wol-
   Las clases .is-hover / .is-active / .is-focus solo existen
   para documentar estados en el manual.
   ========================================================= */

/* ---------- BOTONES ---------- */
.wol-btn{
  --h:52px; --px:26px; --fs:14.5px;
  font-family:var(--label),var(--font-stack);font-stretch:var(--label-stretch);font-weight:700;font-size:var(--fs);letter-spacing:.01em;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:var(--h);padding:0 var(--px);border-radius:var(--r-btn);
  border:var(--border-w) solid transparent;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast) var(--ease-out);
  position:relative;user-select:none;
}
.wol-btn svg{width:16px;height:16px;flex-shrink:0;transition:transform var(--dur-base) var(--ease-out)}
.wol-btn--sm{--h:40px;--px:18px;--fs:13px}
.wol-btn--lg{--h:60px;--px:34px;--fs:16px}
.wol-btn--block{width:100%}

.wol-btn--primary{background:var(--primary);color:var(--on-primary)}
.wol-btn--primary:hover,.wol-btn--primary.is-hover{background:var(--primary-hover)}
.wol-btn--secondary{background:transparent;color:var(--text);border-color:var(--text)}
.wol-btn--secondary:hover,.wol-btn--secondary.is-hover{background:var(--text);color:var(--bg)}
.wol-btn--ghost{background:transparent;color:var(--text);padding:0 4px;height:auto;min-height:32px;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px}
.wol-btn--ghost:hover,.wol-btn--ghost.is-hover{text-decoration-thickness:3px}
.wol-btn--danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.wol-btn--danger:hover,.wol-btn--danger.is-hover{background:var(--danger);color:var(--bg)}

.wol-btn:hover svg,.wol-btn.is-hover svg{transform:translateX(3px)}
.wol-btn:active,.wol-btn.is-active{transform:translateY(1px) scale(.985)}
.wol-btn:focus-visible,.wol-btn.is-focus{outline:2px solid var(--focus);outline-offset:3px}
.wol-btn:disabled,.wol-btn[aria-disabled="true"]{opacity:.35;cursor:not-allowed;transform:none}
.wol-btn:disabled svg{transform:none}
.wol-btn.is-loading{color:transparent!important;pointer-events:none}
.wol-btn.is-loading::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--on-primary);border-right-color:transparent;border-radius:50%;animation:wol-spin .7s linear infinite}
.wol-btn--secondary.is-loading::after{border-color:var(--text);border-right-color:transparent}
.wol-btn--icon{width:var(--h);padding:0}
@keyframes wol-spin{to{transform:rotate(360deg)}}

/* ---------- ETIQUETAS ---------- */
.wol-eyebrow{font-family:var(--label),var(--font-stack);font-stretch:var(--label-stretch);font-weight:700;font-size:var(--fs-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--text);display:inline-flex;align-items:center;gap:10px}
.wol-eyebrow::before{content:"";width:8px;height:8px;background:currentColor;flex-shrink:0}  /* cuadrado = diéresis */
.wol-tag{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:var(--border-w) solid var(--border-strong);font:600 12px var(--body),var(--font-stack);color:var(--text)}
.wol-tag--solid{background:var(--text);color:var(--bg);border-color:var(--text)}
.wol-tag--success{color:var(--success);border-color:currentColor}
.wol-tag--danger{color:var(--danger);border-color:currentColor}
.wol-tag--warning{color:var(--warning);border-color:currentColor}
.wol-num{font-family:var(--display),var(--font-stack);font-weight:var(--display-w);font-style:var(--display-style);font-stretch:var(--display-stretch);letter-spacing:var(--display-track);line-height:1}

/* ---------- FORMULARIOS ---------- */
.wol-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.wol-label{font:600 13px var(--body),var(--font-stack);color:var(--text)}
.wol-label small{font-weight:400;color:var(--muted);margin-left:6px}
.wol-input,.wol-select,.wol-textarea{
  width:100%;height:52px;padding:0 16px;background:var(--surface);color:var(--text);
  border:var(--border-w) solid var(--border-strong);border-radius:var(--r-sm);
  font:400 16px var(--body),var(--font-stack);outline:none;transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
  -webkit-appearance:none;appearance:none;
}
.wol-textarea{height:auto;min-height:120px;padding:14px 16px;resize:vertical;line-height:1.5}
.wol-input::placeholder,.wol-textarea::placeholder{color:var(--muted)}
.wol-input:hover,.wol-select:hover,.wol-textarea:hover{border-color:var(--text-muted)}
.wol-input:focus,.wol-select:focus,.wol-textarea:focus,.wol-input.is-focus{border-color:var(--text);box-shadow:0 0 0 1px var(--text)}
.wol-input[aria-invalid="true"],.wol-input.is-error{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
.wol-input:disabled,.wol-select:disabled,.wol-textarea:disabled{opacity:.4;cursor:not-allowed}
.wol-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.wol-help{font:400 12.5px var(--body),var(--font-stack);color:var(--muted)}
.wol-help--error{color:var(--danger);display:flex;gap:6px;align-items:center}
.wol-help--error::before{content:"";width:6px;height:6px;background:currentColor}

.wol-check,.wol-radio{display:inline-flex;align-items:center;gap:12px;font:400 15px var(--body),var(--font-stack);color:var(--text);cursor:pointer}
.wol-check input,.wol-radio input{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin:0;border:1.5px solid var(--border-strong);background:var(--surface);display:grid;place-content:center;cursor:pointer;flex-shrink:0;transition:background var(--dur-fast),border-color var(--dur-fast)}
.wol-radio input{border-radius:50%}
.wol-check input::after{content:"";width:11px;height:6px;border:2.5px solid var(--bg);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform var(--dur-fast) var(--ease-out)}
.wol-radio input::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--bg);transform:scale(0);transition:transform var(--dur-fast) var(--ease-out)}
.wol-check input:checked,.wol-radio input:checked{background:var(--text);border-color:var(--text)}
.wol-check input:checked::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.wol-radio input:checked::after{transform:scale(1)}
.wol-check input:focus-visible,.wol-radio input:focus-visible,.wol-switch input:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.wol-check input:disabled,.wol-radio input:disabled{opacity:.4;cursor:not-allowed}

.wol-switch{display:inline-flex;align-items:center;gap:12px;font:400 15px var(--body),var(--font-stack);color:var(--text);cursor:pointer}
.wol-switch input{-webkit-appearance:none;appearance:none;width:46px;height:26px;margin:0;border:1.5px solid var(--border-strong);background:var(--surface);position:relative;cursor:pointer;transition:background var(--dur-base),border-color var(--dur-base)}
.wol-switch input::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;background:var(--text-muted);transition:transform var(--dur-base) var(--ease-out),background var(--dur-base)}
.wol-switch input:checked{background:var(--text);border-color:var(--text)}
.wol-switch input:checked::after{transform:translateX(20px);background:var(--bg)}

/* ---------- CARDS ---------- */
.wol-card{background:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--r-lg);padding:var(--sp-6);position:relative;transition:border-color var(--dur-base),transform var(--dur-base) var(--ease-out)}
.wol-card--link{cursor:pointer;text-decoration:none;color:inherit;display:block}
.wol-card--link:hover,.wol-card.is-hover{border-color:var(--text);transform:translateY(-3px)}
.wol-card h3{font-family:var(--display),var(--font-stack);font-weight:var(--display-w);font-style:var(--display-style);font-stretch:var(--display-stretch);letter-spacing:var(--display-track);font-size:24px;line-height:1.1;margin:18px 0 10px;color:var(--text)}
.wol-card p{font:400 15px/1.6 var(--body),var(--font-stack);color:var(--text-muted)}
.wol-card .wol-num{font-size:48px;color:var(--text)}
/* servicio: barra superior gruesa */
.wol-card--service{border-top:4px solid var(--text)}
/* paso de proceso: número gigante */
.wol-card--step .wol-num{font-size:64px;-webkit-text-stroke:1.5px var(--text);color:transparent}
.wol-card--step h3{font-size:22px}
/* filtro sí / no */
.wol-filter{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:20px}
.wol-filter li{font:400 15px/1.5 var(--body),var(--font-stack);color:var(--text-muted);padding-left:28px;position:relative}
.wol-filter li::before{position:absolute;left:0;top:1px;width:18px;height:18px;display:grid;place-content:center;font:700 12px var(--body);content:"✓";background:var(--text);color:var(--bg)}
.wol-filter--no li::before{content:"✕";background:transparent;color:var(--muted);border:1.5px solid var(--border-strong);width:15px;height:15px;font-size:10px}
.wol-filter--no li{color:var(--muted)}
/* testimonio */
.wol-quote blockquote{font-family:var(--display),var(--font-stack);font-weight:var(--display-w);font-style:var(--display-style);font-stretch:110%;font-size:22px;line-height:1.2;letter-spacing:-.01em;color:var(--text)}
.wol-quote blockquote::before{content:"“";display:block;font-size:64px;line-height:.6;margin-bottom:8px}
.wol-quote figcaption{display:flex;align-items:center;gap:12px;margin-top:24px;font:600 14px var(--body),var(--font-stack);color:var(--text)}
.wol-quote figcaption small{display:block;font-weight:400;color:var(--muted);font-size:12.5px;margin-top:2px}
/* dato / KPI */
.wol-stat .wol-num{font-size:clamp(48px,6vw,72px)}
.wol-stat p{margin-top:10px;max-width:24ch}

/* ---------- AVATAR / CLIENTE ---------- */
.wol-avatar{width:44px;height:44px;flex-shrink:0;background:var(--surface-2) center/cover no-repeat;border:1.5px solid var(--text);display:grid;place-content:center;font:800 13px var(--display),var(--font-stack);font-stretch:var(--display-stretch);font-style:italic;color:var(--text);filter:grayscale(1)}
.wol-avatar--sm{width:32px;height:32px;font-size:11px}
.wol-client{display:inline-flex;align-items:center;gap:12px;font-family:var(--display),var(--font-stack);font-weight:800;font-stretch:110%;font-style:italic;font-size:18px;color:var(--text);white-space:nowrap}

/* ---------- ACORDEÓN (FAQ) ---------- */
.wol-acc{border-top:var(--border-w) solid var(--border-strong)}
.wol-acc details{border-bottom:var(--border-w) solid var(--border-strong)}
.wol-acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font:600 17px var(--body),var(--font-stack);color:var(--text)}
.wol-acc summary::-webkit-details-marker{display:none}
.wol-acc summary::after{content:"";width:14px;height:14px;flex-shrink:0;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;transition:transform var(--dur-base) var(--ease-out)}
.wol-acc details[open] summary::after{transform:rotate(45deg)}
.wol-acc summary:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.wol-acc .ans{padding:0 0 22px;font:400 15px/1.65 var(--body),var(--font-stack);color:var(--text-muted);max-width:64ch}

/* ---------- NAV / HEADER ---------- */
.wol-header{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px;padding:0 var(--sp-6);border-bottom:var(--border-w) solid var(--border);background:var(--bg)}
.wol-header .logo{display:flex;align-items:center;gap:14px;color:var(--text);text-decoration:none}
.wol-header .logo svg{display:block}
.wol-header nav{display:flex;gap:28px}
.wol-header nav a{font:500 14px var(--body),var(--font-stack);color:var(--text-muted);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.wol-header nav a:hover,.wol-header nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--text)}
.wol-burger{display:none;width:44px;height:44px;border:var(--border-w) solid var(--border-strong);background:transparent;color:var(--text);cursor:pointer;place-content:center;gap:5px}
.wol-burger span{display:block;width:18px;height:2px;background:currentColor}

/* ---------- MENSAJES ---------- */
.wol-alert{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:var(--border-w) solid var(--border-strong);border-left-width:4px;background:var(--surface);font:400 14.5px/1.5 var(--body),var(--font-stack);color:var(--text-muted)}
.wol-alert b{color:var(--text);font-weight:600;display:block;margin-bottom:2px}
.wol-alert--success{border-left-color:var(--success)}
.wol-alert--danger{border-left-color:var(--danger)}
.wol-alert--info{border-left-color:var(--text)}
.wol-toast{display:inline-flex;align-items:center;gap:12px;padding:14px 18px;background:var(--text);color:var(--bg);font:600 14px var(--body),var(--font-stack)}
.wol-toast svg{width:18px;height:18px}

/* ---------- SKELETON ---------- */
.wol-skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:wol-shimmer 1.4s linear infinite}
@keyframes wol-shimmer{to{background-position:-200% 0}}

@media (max-width:820px){
  .wol-header nav{display:none}
  .wol-burger{display:grid}
  .wol-header{padding:0 var(--sp-4);height:64px}
  .wol-card{padding:var(--sp-5)}
}
@media (prefers-reduced-motion:reduce){
  .wol-skel,.wol-btn.is-loading::after{animation:none}
}