/* Gala Worklab · componentes de la tienda (galaworklab.es). Usa los tokens de /assets/gala-worklab.css; no los redefine. */

/* ---------- Ritmo y titulares a 360 px ---------- */
.gw-hero{padding:72px 0 40px}
/* Reglas de maquetación SOLO de las páginas de la tienda (body.gw): este CSS también se carga en tablassalariales por la captación */
@media(max-width:600px){
  body.gw .h1,body.gw h1{font-size:34px}
  body.gw .display{font-size:42px}
  body.gw .h2,body.gw h2{font-size:25px}
  body.gw section{padding:40px 0 16px}
  .gw-hero{padding:40px 0 24px}
  body.gw .panel-tinta{padding:28px 22px; border-radius:var(--radius-lg)}
}
.gw-ancho{max-width:760px}
.gw-centro{text-align:center; margin-inline:auto}
.gw-acciones{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; align-items:center}
body.gw .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; white-space:nowrap}
.btn.grande{height:48px; padding:0 26px; font-size:15px}
/* v2: el verde solo responde (punto, resultado, final de titular); el botón principal va en índigo */
body.gw .btn.punto,.gw-captacion .btn.punto{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
body.gw .btn.punto:hover,.gw-captacion .btn.punto:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.btn[aria-busy="true"]{opacity:.7; pointer-events:none}
.gw-flecha::after{content:'→'; font-weight:800}

/* ---------- Menú provisional (hasta el menú común de la coordinadora) ---------- */
.gw-menu{display:flex; align-items:center; gap:22px; font-size:14px; font-weight:600}
.gw-menu a{text-decoration:none; color:var(--ink-2)}
.gw-menu a:hover,.gw-menu a[aria-current="page"]{color:var(--accent)}
.gw-menu .btn{height:36px; padding:0 16px; font-size:13px; color:var(--on-accent)}
@media(max-width:820px){.gw-menu a:not(.btn){display:none}}
@media(max-width:400px){body.gw .nav .logo{font-size:13px}.gw-menu .btn{padding:0 12px}}

/* ---------- Las dos puertas ---------- */
.gw-puertas{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:36px}
@media(max-width:760px){.gw-puertas{grid-template-columns:1fr}}
.gw-puerta{display:grid; gap:10px; align-content:start; text-decoration:none; color:inherit; background:var(--paper-0);
  border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-sm);
  transition:transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease)}
.gw-puerta:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--accent)}
.gw-puerta .kpi-label{color:var(--celeste)}
.gw-puerta .h3{font-size:24px; font-weight:800; color:var(--accent); letter-spacing:-.01em}
.gw-puerta p{margin:0; color:var(--ink-2)}
.gw-puerta .ir{margin-top:6px; font-weight:800; color:var(--accent)}
.gw-puerta .ir::after{content:' →'}
.gw-puerta.tinta{background:var(--gradient-ink); border-color:transparent; color:#fff}
.gw-puerta.tinta .h3{color:#fff}
.gw-puerta.tinta p{color:rgba(255,255,255,.7)}
.gw-puerta.tinta .kpi-label,.gw-puerta.tinta .ir{color:rgba(255,255,255,.72)}
:root[data-theme="dark"] .gw-puerta.tinta{background:#1C2650}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .gw-puerta.tinta{background:#1C2650}}

/* ---------- Herramientas con su signo ---------- */
.gw-herramientas{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media(max-width:1000px){.gw-herramientas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.gw-herramientas{grid-template-columns:1fr}}
.gw-herr{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; align-content:start; background:var(--paper-0); border:1px solid var(--hairline);
  border-radius:var(--radius-md); padding:18px; text-decoration:none; color:inherit; transition:border-color 180ms var(--ease)}
.gw-herr:hover{border-color:var(--accent)}
.gw-herr .simbolo{width:34px; height:34px; grid-row:span 3}
.gw-herr b{font-size:16px; color:var(--accent); font-weight:800}
.gw-herr span{font-size:13px; color:var(--ink-2); line-height:1.45}
.gw-herr .estado{justify-self:start; margin-top:6px}

/* ---------- Pasos ---------- */
.gw-pasos{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; counter-reset:paso}
@media(max-width:820px){.gw-pasos{grid-template-columns:1fr}}
.gw-paso{counter-increment:paso; padding-top:18px; border-top:2px solid var(--ink-1)}
.gw-paso::before{content:counter(paso,decimal-leading-zero); display:block; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-3); margin-bottom:8px}
.gw-paso p{color:var(--ink-2); font-size:14px}

/* ---------- Kits ---------- */
.gw-kits{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:1000px){.gw-kits{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.gw-kits{grid-template-columns:1fr}}
.gw-kit{display:flex; flex-direction:column; gap:10px; background:var(--paper-0); border:1px solid var(--hairline); border-radius:var(--radius-md);
  padding:22px; box-shadow:var(--shadow-sm); border-top:4px solid var(--accent)}
/* Colores de producto de la identidad v2.0 (variables de la hoja común; el segundo valor es la reserva si aún no están) */
.gw-kit[data-linea="transparencia"]{border-top-color:var(--prod-transparencia,#6B8420)}
.gw-kit[data-linea="acoso"]{border-top-color:var(--prod-acoso,#9A4D6E)}
.gw-kit[data-linea="compliance"]{border-top-color:var(--prod-compliance,#2F7F86)}
.gw-kit[data-linea="formacion"]{border-top-color:var(--prod-formacion,#6E66A8)}
.gw-kit[data-linea="marca"]{border-top-color:var(--accent)}
.gw-kit .cab{display:flex; gap:10px; align-items:center; justify-content:space-between}
.gw-kit .cab .simbolo{width:26px; height:26px; flex:none}
.gw-kit .norma{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-3)}
.gw-kit p{margin:0; color:var(--ink-2); font-size:14px}
.gw-kit .precio{font-size:26px; font-weight:800; color:var(--accent); letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin-top:auto; padding-top:8px}
.gw-kit .precio small{font-size:12px; font-weight:600; color:var(--ink-3); letter-spacing:0}
.gw-kit .btn{width:100%}
.gw-lista{list-style:none; padding:0; margin:0; display:grid; gap:6px; font-size:14px; color:var(--ink-2)}
.gw-lista li{padding-left:20px; position:relative}
.gw-lista li::before{content:''; position:absolute; left:2px; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--prod,var(--accent))}

/* ---------- Tabla de precios ---------- */
.gw-tabla{overflow-x:auto; -webkit-overflow-scrolling:touch; background:var(--paper-0); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:18px 6px 6px}
.gw-tabla table{min-width:620px}
.gw-tabla td:first-child b{color:var(--accent)}
.gw-tabla td .norma{display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-3)}
.gw-tabla .btn{height:34px; padding:0 14px; font-size:13px}

/* ---------- Diálogo común (pago y captación) ---------- */
.gw-dialogo{border:0; border-radius:var(--radius-lg); padding:32px 28px 28px; width:min(460px,calc(100vw - 32px)); background:var(--paper-0); color:var(--ink-1); box-shadow:var(--shadow-lg)}
.gw-dialogo::backdrop{background:rgba(18,26,51,.55); backdrop-filter:blur(3px)}
.gw-cerrar{position:absolute; top:10px; right:12px; width:36px; height:36px; border:0; background:transparent; font-size:26px; line-height:1; color:var(--ink-3); cursor:pointer; border-radius:50%}
.gw-cerrar:hover{background:var(--paper-2); color:var(--ink-1)}
.gw-opciones{display:grid; gap:10px; margin-top:18px}
.gw-opcion{display:flex; justify-content:space-between; align-items:center; gap:12px; font:inherit; font-size:15px; padding:14px 16px; border:1px solid var(--hairline);
  border-radius:var(--radius-sm); background:var(--paper-1); color:var(--ink-1); cursor:pointer; text-align:left}
.gw-opcion:hover,.gw-opcion:focus-visible{border-color:var(--accent); outline:none; box-shadow:var(--ring)}
.gw-opcion b{color:var(--accent); font-variant-numeric:tabular-nums}

/* ---------- Captación ---------- */
.gw-captacion{background:var(--paper-0); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:22px}
.gw-dialogo .gw-captacion{border:0; padding:0; background:transparent}
.gw-captacion form{display:grid; gap:10px}
.gw-cap-titulo{font-size:18px; font-weight:800; color:var(--accent); margin:0; letter-spacing:-.01em}
.gw-cap-texto{font-size:14px; color:var(--ink-2); margin:0}
.gw-cap-fila{display:flex; gap:8px}
.gw-cap-fila input{flex:1; min-width:0; height:44px}
.gw-cap-fila .btn{height:44px}
@media(max-width:420px){.gw-cap-fila{flex-direction:column}.gw-cap-fila .btn{width:100%}}
.gw-cap-acepto{display:flex; gap:8px; align-items:flex-start; font-size:12.5px; font-weight:400; color:var(--ink-3); margin:0}
.gw-cap-acepto input{width:16px; height:16px; margin-top:2px; flex:none}
.gw-captacion label:not(.gw-cap-acepto){font-size:13px}
.gw-captacion label input,.gw-captacion label select{margin-top:6px; font-weight:400}
.gw-cap-estado{font-size:13px; color:var(--danger); margin:0; min-height:0}
.gw-oculto{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.panel-tinta .gw-captacion{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14)}
.panel-tinta .gw-cap-titulo{color:#fff}
.panel-tinta .gw-cap-texto,.panel-tinta .gw-cap-acepto{color:rgba(255,255,255,.7)}
.panel-tinta .gw-cap-acepto a{color:#fff}

/* ---------- Preguntas frecuentes ---------- */
.gw-faq{display:grid; gap:0; border-top:1px solid var(--hairline)}
.gw-faq details{border-bottom:1px solid var(--hairline); padding:16px 0}
.gw-faq summary{cursor:pointer; font-weight:700; font-size:16px; color:var(--ink-1); list-style:none; display:flex; justify-content:space-between; gap:16px}
.gw-faq summary::after{content:'+'; color:var(--accent); font-weight:800; font-size:20px; line-height:1}
.gw-faq details[open] summary::after{content:'−'}
.gw-faq details p{color:var(--ink-2); font-size:14.5px; max-width:760px}

/* ---------- Pie de la tienda ---------- */
.gw-pie-enlaces{display:flex; flex-wrap:wrap; gap:8px 20px}
.gw-pie-enlaces a{color:rgba(255,255,255,.8); text-decoration:none}
.gw-pie-enlaces a:hover{color:#fff}

/* ---------- Versión básica gratis junto al botón de compra ---------- */
.gw-basica{display:block; font-size:13px; font-weight:600; color:var(--accent); text-align:center; margin-top:2px}
.gw-tabla .gw-basica{text-align:right; margin-top:6px; white-space:nowrap}
.gw-kit .btn.punto{color:var(--on-accent)}

/* Precio con IVA incluido junto al precio sin IVA (lo exige la información al consumidor) */
.gw-coniva{display:block; font-size:12px; font-weight:600; color:var(--ink-3); letter-spacing:0; margin-top:2px}
.gw-tabla td .gw-coniva{font-weight:400}

/* =====================================================================
   Identidad v2.0 · piezas del manual (Identidad-GALA/v2/manual-gala-worklab-v2.html, cap. 08)
   Copiadas del manual con prefijo gw-. Solo variables de color locales de componente (no se redefinen tokens comunes).
   ===================================================================== */
:root{ --gw-suave:#DCE0EB; --gw-panel-punto:#26305A; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --gw-suave:#28315A; --gw-panel-punto:#26305A; } }
:root[data-theme="dark"]{ --gw-suave:#28315A; }

/* Tramas de puntos (módulo de 40 px) detrás de héroes y cierres; se desvanecen hacia el texto */
.gw-trama{position:relative; isolation:isolate}
.gw-trama::before{content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(circle,var(--gw-suave) 7.5px,transparent 8px); background-size:40px 40px; background-position:right top;
  -webkit-mask-image:linear-gradient(100deg,transparent 35%,#000 85%); mask-image:linear-gradient(100deg,transparent 35%,#000 85%); opacity:.9}
.panel-tinta.gw-trama::before{background-image:radial-gradient(circle,var(--gw-panel-punto) 7.5px,transparent 8px); opacity:1}
@media(max-width:700px){.gw-trama::before{-webkit-mask-image:linear-gradient(180deg,transparent 40%,#000 100%); mask-image:linear-gradient(180deg,transparent 40%,#000 100%)}}

/* Ilustración: la plantilla vista desde arriba, un punto una persona */
.gw-ilu{background:var(--paper-0); border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:clamp(20px,3vw,32px); display:grid; gap:18px; align-content:start; min-width:0}
.gw-puntos{display:grid; grid-template-columns:repeat(var(--cols,25),minmax(0,1fr)); gap:5px}
.gw-puntos span{aspect-ratio:1; border-radius:50%; background:var(--gw-suave); transition:background-color var(--mov-medio,320ms) var(--mov-curva,ease), transform var(--mov-medio,320ms) var(--mov-rebote,ease)}
.gw-puntos span.a{background:var(--punto-reposo)}
.gw-puntos span.v{background:var(--punto)}
.gw-puntos span.fuera{background:transparent; box-shadow:inset 0 0 0 1.5px var(--gw-suave)}
.gw-slider{display:grid; gap:8px}
.gw-slider label{font-size:14px; font-weight:400; color:var(--ink-2); display:flex; justify-content:space-between; gap:12px; margin:0}
.gw-slider output{font:800 22px 'Barlow',sans-serif; color:var(--accent); font-variant-numeric:tabular-nums}
.gw-slider input[type=range]{height:auto; padding:0; border:0; background:none; accent-color:var(--accent)}
.gw-oblig{display:grid; gap:0}
.gw-oblig div{display:grid; grid-template-columns:22px 1fr auto; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--hairline); font-size:14px; color:var(--ink-3); transition:color var(--mov-medio,320ms)}
.gw-oblig div::before{content:''; width:12px; height:12px; border-radius:50%; border:1.5px solid var(--gw-suave); transition:all var(--mov-medio,320ms) var(--mov-rebote,ease)}
.gw-oblig div.si{color:var(--ink-1)}
.gw-oblig div.si::before{background:var(--punto); border-color:var(--punto); transform:scale(1.15)}
.gw-oblig div.prox.si::before{background:transparent; border-color:var(--celeste)}
.gw-oblig .mono{font-size:11px; color:var(--ink-3)}
.gw-cargando{width:36px; height:36px; flex:none}
@media (prefers-reduced-motion: reduce){.gw-puntos span,.gw-oblig div,.gw-oblig div::before{transition:none}}

/* v2 (14/10): logotipo a dos tonos y sello solo en el pie (APLICAR-V2.md). Reserva por si la hoja común aún no lo trae */
.logo .wl{color:var(--worklab,#6170A6)}
.logo.blanco .wl,.pie .logo .wl{color:#AEBBE3}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo:not(.blanco) .wl{color:var(--worklab,#8E9CD0)}}
:root[data-theme="dark"] .logo:not(.blanco) .wl{color:var(--worklab,#8E9CD0)}
.gw-sello-pie{display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap}
.gw-sello-pie .simbolo{width:16px; height:16px; flex:none}
.gw-sello-pie b{color:#fff}

/* Catálogo /herramientas/: icono v2 del kit y borde superior en el color del producto */
.gw-herr-cat{border-top:4px solid var(--prod,var(--accent)); position:relative}
.gw-herr-cat img{width:34px; height:34px; grid-row:span 3}
.gw-herr-cat .gw-dest{grid-column:2; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-3)}