/* Gala Worklab · «la misma casa» que convenioslaborales.com (Gala, 19/10/2026) · SOLO galaworklab.com
   Piezas de la portada de convenioslaborales (Convenios/fuente/portada_v3.py y carrusel_servicios.py) con clases gw-:
   cinta de herramientas, columnas de familia, tarjetas de herramienta, bloque de gestorías y trabajadores.
   La cabecera es la de convenioslaborales (Convenios/fuente/cabecera_animada.py), que construir.py inyecta en línea.
   Marca 3.3: tarjetas blancas con filete gris de 1 px, radio 18 y sin sombra; filo superior de 4 px del color de la familia
   (Cumplimiento, sin filo: «poco morado»); botones índigo; colores de familia solo como punto, rótulo o filo. */

/* ---------- Acción de la portada: ¿Cuántas personas sois? ---------- */
.gw-tam{display:grid; gap:8px; margin-top:4px}
.gw-tam-p{margin:0; font-size:17px; font-weight:800; color:var(--indigo,#2B3A67); letter-spacing:-.01em}
.gw-tam-fila{display:flex; flex-wrap:wrap; gap:8px}
.gw-tam-a{display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:64px; padding:0 18px; border-radius:999px;
  background:var(--indigo,#2B3A67); border:1px solid var(--indigo,#2B3A67); color:var(--on-accent,#FFFFFF) !important; font-size:16px; font-weight:700; line-height:1;
  text-decoration:none !important; touch-action:manipulation; transition:background .2s ease, transform .15s ease}
.gw-tam-a:hover{background:var(--indigo-hover,#22305A)}
.gw-tam-a:active{transform:scale(.97)}
.gw-tam-a:focus-visible{outline:none; box-shadow:var(--ring)}
.gw-tam-nota{margin:0; font-size:15px; color:var(--ink-2,#4A536E)}

/* ---------- Cinta en movimiento (copia de cl-car) ---------- */
.gw-car{position:relative; overflow:hidden; max-width:100%; padding:10px 0 12px; background:var(--banda,#F3F4F9); border-bottom:1px solid var(--linea,#E1E4EC)}
.gw-car-vp{overflow-x:auto; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.gw-car-vp::-webkit-scrollbar{display:none}
.gw-car-pista{display:flex; width:max-content; margin:0; padding:2px 0; list-style:none}
.gw-car-pista li{flex:none; margin-right:12px}
.gw-car-it{display:flex; align-items:center; gap:10px; box-sizing:border-box; min-height:48px; padding:6px 18px 6px 6px; border:1px solid var(--linea,#E1E4EC); border-left:4px solid var(--fam); border-radius:999px; background:var(--tarjeta,#FFFFFF); color:var(--indigo,#2B3A67); font-size:15px; font-weight:700; line-height:1.2; white-space:nowrap; text-decoration:none !important; touch-action:manipulation}
.gw-car-it:hover{border-color:color-mix(in srgb,var(--fam) 60%,var(--linea,#E1E4EC))}
.gw-car-it:focus-visible{outline:none; box-shadow:var(--ring)}
.gw-car-ic{display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%; background:color-mix(in srgb,var(--fam) 12%,var(--tarjeta,#FFFFFF)); color:var(--indigo,#2B3A67)}
.gw-car-ic svg{width:20px; height:20px}
.gw-car-cumplimiento{border-left-color:var(--linea,#E1E4EC)}   /* poco morado: sin filo; el morado queda en el círculo del icono */
.gw-car-cumplimiento:hover{border-color:var(--indigo,#2B3A67)}
.gw-car-anim .gw-car-vp{overflow:hidden}
.gw-car-anim .gw-car-pista{animation:gw-car-mueve var(--dur,80s) linear infinite; will-change:transform}
.gw-car-anim:hover .gw-car-pista,.gw-car-anim:focus-within .gw-car-pista,.gw-car-anim.gw-car-pausa .gw-car-pista{animation-play-state:paused}
@keyframes gw-car-mueve{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.gw-car-anim .gw-car-vp{overflow-x:auto} .gw-car-anim .gw-car-pista{animation:none}}
@media(max-width:600px){.gw-car{padding:8px 0 10px} .gw-car-it{min-height:44px; font-size:14px; padding-right:14px} .gw-car-ic{width:32px; height:32px} .gw-car-ic svg{width:18px; height:18px}}

/* ---------- Columnas de familia (copia de cl-bq) ---------- */
.gw-grupos{padding:16px 0 30px}
/* 5 familias desde el 19/10/2026 (entra Escritos y modelos): auto-fit para que no quede una tarjeta sola en su fila */
.gw-bloques{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); gap:14px}
.gw-bq{position:relative; display:flex; flex-direction:column; height:100%; box-sizing:border-box; overflow:hidden; background:var(--tarjeta,#FFFFFF); border:1px solid var(--linea,#E1E4EC); border-radius:18px; box-shadow:none; text-decoration:none !important; color:inherit; touch-action:manipulation}
.gw-bq:hover{border-color:var(--indigo,#2B3A67)}
.gw-bq:focus-visible{outline:none; box-shadow:var(--ring)}
.gw-bq-top{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:4px solid var(--fam)}
.gw-bq-cumplimiento .gw-bq-top{border-bottom:1px solid var(--linea,#E1E4EC); padding-bottom:17px}
.gw-bq-ic{display:block; width:44px; height:44px; flex:none}
.gw-bq-ic img{display:block; width:100%; height:100%}
.gw-bq-n{display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700; color:var(--fam-t); text-align:right}
.gw-bq-n::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--fam); flex:none}
.gw-bq-cuerpo{display:flex; flex-direction:column; flex:1; padding:14px 16px 16px}
.gw-bq-tit{margin:0; font-size:clamp(20px,1.8vw,24px); line-height:1.1; font-weight:800; letter-spacing:-.035em; color:var(--indigo,#2B3A67); text-wrap:balance}
.gw-bq-tit i,.gw-tj-tit i,.gw-dos-tit i,.gw-blq-tit i{font-style:normal; color:var(--punto,#8FAF2E)}
.gw-bq-txt{margin:6px 0 12px; font-size:15px; line-height:1.4; color:var(--ink-2,#4A536E); text-wrap:pretty}
.gw-bq-chips{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; padding:0}
.gw-bq-chips span{display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 6px; border-radius:999px; background:var(--banda,#F3F4F9); border:1px solid var(--linea,#E1E4EC); font-size:13px; line-height:1.3; font-weight:600; color:var(--indigo,#2B3A67)}
.gw-bq-chips svg{width:16px; height:16px; flex:none; color:var(--indigo,#2B3A67)}

/* Botón índigo de tarjeta (copia de cl-tj-btn) */
.gw-btn{display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin-top:auto; padding:0 16px; min-height:40px; border-radius:999px; background:var(--indigo,#2B3A67); color:var(--on-accent,#FFFFFF); font-size:15px; font-weight:700; line-height:1.1; transition:background .2s ease}
.gw-btn b{transition:transform .2s ease}
.gw-bq:hover .gw-btn,.gw-tj:hover .gw-btn,.gw-dos-it:hover .gw-btn{background:var(--indigo-hover,#22305A)}
.gw-bq:hover .gw-btn b,.gw-tj:hover .gw-btn b,.gw-dos-it:hover .gw-btn b{transform:translateX(3px)}

/* ---------- Tarjetas de herramienta de las páginas de familia (copia de cl-tarjeta) ---------- */
.gw-tarjetas{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.gw-tj{position:relative; display:flex; flex-direction:column; height:100%; box-sizing:border-box; padding:16px 16px 14px; background:var(--tarjeta,#FFFFFF); border:1px solid var(--linea,#E1E4EC); border-top:4px solid var(--fam); border-radius:18px; box-shadow:none; text-decoration:none !important; color:inherit; touch-action:manipulation}
.gw-tj-cumplimiento{border-top:1px solid var(--linea,#E1E4EC)}
.gw-tj:hover{border-color:var(--indigo,#2B3A67); border-top-color:var(--fam)}
.gw-tj-cumplimiento:hover{border-top-color:var(--indigo,#2B3A67)}
.gw-tj:focus-visible{outline:none; box-shadow:var(--ring)}
.gw-tj-ic{position:absolute; top:14px; right:14px; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--banda,#F3F4F9); color:var(--indigo,#2B3A67)}
.gw-tj-ic svg{width:20px; height:20px}
.gw-tj-tit{margin:0 46px 0 0; font-size:clamp(20px,1.8vw,24px); line-height:1.1; font-weight:800; letter-spacing:-.035em; color:var(--indigo,#2B3A67); text-wrap:balance}
.gw-tj-preg{margin:8px 0 14px; font-size:15px; line-height:1.4; color:var(--ink-2,#4A536E)}
.gw-tj-fuera{display:block; margin:-6px 0 12px; font-size:13px; color:var(--ink-2,#4A536E)}

/* Bloques de Cumplimiento: rótulo con el punto morado, titular en índigo */
.gw-blq{padding:18px 0 6px}
.gw-blq + .gw-blq{border-top:1px solid var(--linea,#E1E4EC); margin-top:14px; padding-top:24px}
.gw-rot{display:flex; align-items:center; gap:10px; margin:0 0 6px; font-size:15px; font-weight:800; color:var(--indigo,#2B3A67)}
.gw-rot i{width:12px; height:12px; border-radius:50%; background:#8A4A98; flex:none}
.gw-blq-tit{margin:0; font-size:clamp(26px,3vw,36px); line-height:1.05; font-weight:800; letter-spacing:-.03em; color:var(--indigo,#2B3A67); text-wrap:balance}
.gw-blq-meta{margin:8px 0 14px; font-size:15px; line-height:1.45; color:var(--ink-2,#4A536E)}
.gw-blq-meta b{color:var(--indigo,#2B3A67)}

/* ---------- Gestorías y quien trabaja ---------- */
.gw-dos{padding:6px 0 40px}
.gw-dos ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.gw-dos-it{display:flex; flex-direction:column; height:100%; box-sizing:border-box; padding:18px 18px 16px; background:var(--tarjeta,#FFFFFF); border:1px solid var(--linea,#E1E4EC); border-top:4px solid var(--indigo,#2B3A67); border-radius:18px; text-decoration:none !important; color:inherit; touch-action:manipulation}
.gw-dos-it:hover{border-color:var(--indigo,#2B3A67)}
.gw-dos-it:focus-visible{outline:none; box-shadow:var(--ring)}
.gw-dos-tit{margin:0; font-size:clamp(20px,1.8vw,24px); line-height:1.1; font-weight:800; letter-spacing:-.035em; color:var(--indigo,#2B3A67)}
.gw-dos-txt{margin:6px 0 14px; font-size:15px; line-height:1.45; color:var(--ink-2,#4A536E)}

/* ---------- Cumplimiento en la cabecera (la cabecera de convenioslaborales no conoce esta familia) ---------- */
.cl-cab-cumplimiento{--fam:#8A4A98; --fam-t:#8A4A98}
/* Portada: el signo enciende 5 familias cada 1,5 s, con Cumplimiento en la posición 2 (orden: Normativa, Cumplimiento, Calculadoras, Escritos, Guías) */
.gw-cab5 .cl-sg-port .cl-f1{animation:gw-s1 7.5s infinite} .gw-cab5 .cl-sg-port .cl-f2{animation:gw-s2 7.5s infinite}
.gw-cab5 .cl-sg-port .cl-f3{animation:gw-s3 7.5s infinite} .gw-cab5 .cl-sg-port .cl-f9{animation:gw-s4 7.5s infinite} .gw-cab5 .cl-sg-port .cl-f7{animation:gw-s5 7.5s infinite}
@keyframes gw-s1{0%,18%{fill:#13A9D8}20%,100%{fill:var(--cab-tinta)}}
@keyframes gw-s2{0%,19%{fill:var(--cab-tinta)}20%,38%{fill:#8A4A98}40%,100%{fill:var(--cab-tinta)}}
@keyframes gw-s3{0%,39%{fill:var(--cab-tinta)}40%,58%{fill:#F08A24}60%,100%{fill:var(--cab-tinta)}}
@keyframes gw-s4{0%,59%{fill:var(--cab-tinta)}60%,78%{fill:#D4E157}80%,100%{fill:var(--cab-tinta)}}
@keyframes gw-s5{0%,79%{fill:var(--cab-tinta)}80%,98%{fill:#2BD4A4}100%{fill:var(--cab-tinta)}}
.gw-cab5 .cl-ley-port .cl-l1{animation:gw-o1 7.5s infinite} .gw-cab5 .cl-ley-port .cl-l5{animation:gw-o2 7.5s infinite}
.gw-cab5 .cl-ley-port .cl-l2{animation:gw-o3 7.5s infinite} .gw-cab5 .cl-ley-port .cl-l3{animation:gw-o4 7.5s infinite} .gw-cab5 .cl-ley-port .cl-l4{animation:gw-o5 7.5s infinite}
@keyframes gw-o1{0%,18%{opacity:1}20%,100%{opacity:0}}
@keyframes gw-o2{0%,19%{opacity:0}20%,38%{opacity:1}40%,100%{opacity:0}}
@keyframes gw-o3{0%,39%{opacity:0}40%,58%{opacity:1}60%,100%{opacity:0}}
@keyframes gw-o4{0%,59%{opacity:0}60%,78%{opacity:1}80%,100%{opacity:0}}
@keyframes gw-o5{0%,79%{opacity:0}80%,98%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .gw-cab5 .cl-sg-port circle,.gw-cab5 .cl-ley-port span{animation:none}
  .gw-cab5 .cl-sg-port .cl-f1{fill:var(--cab-tinta)} .gw-cab5 .cl-sg-port .cl-f2{fill:#8A4A98}
  .gw-cab5 .cl-ley-port .cl-l1{opacity:0} .gw-cab5 .cl-ley-port .cl-l5{opacity:1}
}

/* ---------- Páginas interiores (cabecera vieja .gw-hero): la proporción de la cabecera de convenioslaborales ---------- */
body.gw main > .gw-hero{position:relative; background:var(--fondo,#FFFFFF); padding-top:34px}
body.gw main > .gw-hero::after{content:none}
body.gw main > .gw-hero.gw-trama{padding-bottom:24px !important}
body.gw main > .gw-hero::before{content:""; position:absolute; top:0; bottom:auto; left:0; right:0; width:auto; height:5px; background-size:auto; -webkit-mask:none; mask:none; background:linear-gradient(90deg,#2B3A67 0 90%,#6170A6 90% 99%,#8FAF2E 99% 100%); opacity:1}
body.gw main > .gw-hero .h1{font-size:clamp(36px,5.2vw,64px); line-height:.98; letter-spacing:-.045em; font-weight:800; text-wrap:balance}
body.gw .gw-herr,body.gw .gw-kit,body.gw .card{border-radius:18px; box-shadow:none}

/* ---------- Entrada suave (solo transform y opacity; sin JS o con movimiento reducido, todo visible) ---------- */
.gw-js .gw-in{opacity:0; transform:translateY(20px); transition:opacity .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms), transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.gw-js .gw-in.gw-vis{opacity:1; transform:none}

/* ---------- Modo oscuro: texto de familia en su versión clara ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .gw-bq,:root:not([data-theme="light"]) .gw-tj{--fam-t:var(--fam-td)}
  :root:not([data-theme="light"]) .gw-rot i{background:#C9A0D6}
}
:root[data-theme="dark"] .gw-bq,:root[data-theme="dark"] .gw-tj{--fam-t:var(--fam-td)}

@media (prefers-reduced-motion: reduce){
  .gw-js .gw-in{opacity:1; transform:none; transition:none}
  .gw-btn b,.gw-tam-a{transition:none}
  .gw-bq:hover .gw-btn b,.gw-tj:hover .gw-btn b,.gw-dos-it:hover .gw-btn b{transform:none}
}
@media(max-width:1099px){.gw-tarjetas{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:899px){.gw-bloques,.gw-tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.gw-dos ul{grid-template-columns:1fr}}
@media(max-width:559px){
  .gw-bloques,.gw-tarjetas{grid-template-columns:1fr; gap:10px}
  .gw-bq-top{padding:10px 14px}
  .gw-bq-cumplimiento .gw-bq-top{padding-bottom:13px}
  .gw-bq-ic{width:38px; height:38px}
  .gw-bq-cuerpo{padding:10px 14px 14px}
  .gw-bq-chips{margin-bottom:12px}
  .gw-btn{min-height:38px; padding:0 14px}
  .gw-tj{padding:14px 14px 12px}
  .gw-tam-a{min-width:0; padding:0 16px}
}

/* Tarjetas de pasos (gestorías y otras interiores): sin colores de familia que no son familia; filo índigo y texto gris */
body.gw .card.verde,body.gw .card.oro,body.gw .card.celeste{border-top:4px solid var(--indigo,#2B3A67)}
body.gw .card.verde p,body.gw .card.oro p,body.gw .card.celeste p{color:var(--ink-2,#4A536E)}

/* Comentario #107 de Gala (19/10): los encabezados, con más aire bajo la barra (en toda la web) */
body .cl-cab.gw-cab5, body .cl-cab[class*="cl-cab-"]{padding-top:64px}
body.gw main > .gw-hero{padding-top:64px}
@media (max-width:600px){body .cl-cab.gw-cab5, body .cl-cab[class*="cl-cab-"]{padding-top:40px} body.gw main > .gw-hero{padding-top:40px}}