/* Gala Worklab · marca 3.3 · SOLO galaworklab.com (19/10/2026)
   Compartido/marca.py enlaza esta hoja únicamente en las páginas de galaworklab, al final del <head>:
   convenioslaborales.com no la carga y no cambia (la suya es marca-33.css). Manual: Identidad-GALA/v3/manual-3-3/.
   · Marca en sus colores originales: blanco ~86 %, índigo ~10 % (bloques, pie, botones), banda ~3 %, verde ~1 % (solo el punto final).
   · Cinco familias sustituyen a los 8 colores por herramienta. Solo dentro de las herramientas, como punto, rótulo o filo de 4 px.
     Como texto, siempre la versión oscura (AA sobre blanco). Lima y verde agua nunca se escriben sobre blanco.
   · Tarjetas con filete gris de 1 px, radio 18 y sin sombra. Botones en índigo (ya lo son en gala-worklab.css). */
html:root{
  --fam-normativa:#13A9D8;    --fam-normativa-t:#0A6E8E;     /* Tablas salariales, Convenios, Calendario · posición 1 */
  --fam-cumplimiento:#8A4A98; --fam-cumplimiento-t:#8A4A98;  /* Compliance, Prevención del acoso, Transparencia · posición 2 */
  --fam-calculadoras:#F08A24; --fam-calculadoras-t:#9A4F00;  /* Calculadoras, Cálculo de brecha · posición 3 */
  --fam-guias:#2BD4A4;        --fam-guias-t:#0B7A5B;         /* Formación · posición 7 */
  --fam-escritos:#D4E157;     --fam-escritos-t:#5A6A00;      /* Escritos y modelos · posición 9 */
  /* Los 8 colores por herramienta pasan a su familia */
  --prod-tablas-salariales:var(--fam-normativa); --prod-convenios:var(--fam-normativa);
  --prod-calculadoras:var(--fam-calculadoras); --prod-escritos:var(--fam-escritos); --prod-formacion:var(--fam-guias);
  --prod-compliance:var(--fam-cumplimiento); --prod-acoso:var(--fam-cumplimiento); --prod-transparencia:var(--fam-cumplimiento);
  --prod-tablas-salariales-texto:var(--fam-normativa-t); --prod-convenios-texto:var(--fam-normativa-t);
  --prod-calculadoras-texto:var(--fam-calculadoras-t); --prod-escritos-texto:var(--fam-escritos-t); --prod-formacion-texto:var(--fam-guias-t);
  --prod-compliance-texto:var(--fam-cumplimiento-t); --prod-acoso-texto:var(--fam-cumplimiento-t); --prod-transparencia-texto:var(--fam-cumplimiento-t);
  --celeste:var(--fam-normativa); --celeste-texto:var(--fam-normativa-t); --gold:var(--fam-calculadoras); --gold-texto:var(--fam-calculadoras-t);
  --soft-gold:var(--banda); --soft-blue:var(--banda);
}
/* Bloques de marca (pie, casilla madre, paneles) en índigo, no en tinta: la tinta es para el texto */
@media (prefers-color-scheme: light){ html:root:not([data-theme="dark"]){--panel:#2B3A67; --panel-2:#3A4A8C} }
html:root[data-theme="light"]{--panel:#2B3A67; --panel-2:#3A4A8C}
@media (prefers-color-scheme: dark){
  html:root:not([data-theme="light"]){
    --fam-normativa-t:#6DB8E0; --fam-calculadoras-t:#F2A556; --fam-guias-t:#2BD4A4; --fam-escritos-t:#D4E157; --fam-cumplimiento-t:#C9A0D6;
    --prod-tablas-salariales-texto:var(--fam-normativa-t); --prod-convenios-texto:var(--fam-normativa-t);
    --prod-calculadoras-texto:var(--fam-calculadoras-t); --prod-escritos-texto:var(--fam-escritos-t); --prod-formacion-texto:var(--fam-guias-t);
    --prod-compliance-texto:var(--fam-cumplimiento-t); --prod-acoso-texto:var(--fam-cumplimiento-t); --prod-transparencia-texto:var(--fam-cumplimiento-t);
  }
}
html:root[data-theme="dark"]{
  --fam-normativa-t:#6DB8E0; --fam-calculadoras-t:#F2A556; --fam-guias-t:#2BD4A4; --fam-escritos-t:#D4E157; --fam-cumplimiento-t:#C9A0D6;
  --prod-tablas-salariales-texto:var(--fam-normativa-t); --prod-convenios-texto:var(--fam-normativa-t);
  --prod-calculadoras-texto:var(--fam-calculadoras-t); --prod-escritos-texto:var(--fam-escritos-t); --prod-formacion-texto:var(--fam-guias-t);
  --prod-compliance-texto:var(--fam-cumplimiento-t); --prod-acoso-texto:var(--fam-cumplimiento-t); --prod-transparencia-texto:var(--fam-cumplimiento-t);
}

/* Familia explícita (la usa marca.py en el cálculo de brecha, que es Calculadoras aunque viva en Transparencia) */
[data-familia="normativa"],[data-familia="normativa"] [data-producto]{--prod:var(--fam-normativa); --prod-texto:var(--fam-normativa-t); --fam:var(--fam-normativa); --fam-t:var(--fam-normativa-t)}
[data-familia="cumplimiento"],[data-familia="cumplimiento"] [data-producto]{--prod:var(--fam-cumplimiento); --prod-texto:var(--fam-cumplimiento-t); --fam:var(--fam-cumplimiento); --fam-t:var(--fam-cumplimiento-t)}
[data-familia="calculadoras"],[data-familia="calculadoras"] [data-producto]{--prod:var(--fam-calculadoras); --prod-texto:var(--fam-calculadoras-t); --fam:var(--fam-calculadoras); --fam-t:var(--fam-calculadoras-t)}
[data-familia="guias"],[data-familia="guias"] [data-producto]{--prod:var(--fam-guias); --prod-texto:var(--fam-guias-t); --fam:var(--fam-guias); --fam-t:var(--fam-guias-t)}
[data-familia="escritos"],[data-familia="escritos"] [data-producto]{--prod:var(--fam-escritos); --prod-texto:var(--fam-escritos-t); --fam:var(--fam-escritos); --fam-t:var(--fam-escritos-t)}

/* El punto encendido del signo de cada herramienta toma el color de su familia (conserva su posición) */
[data-producto] svg.simbolo circle.activo,.v2-casilla[data-producto] .sg circle.on{fill:var(--prod)}
.logo:has(.pr[data-prod="tablas"],.pr[data-prod="convenios"]) .simbolo circle.activo{fill:var(--fam-normativa)}
.logo:has(.pr[data-prod="calculadoras"]) .simbolo circle.activo{fill:var(--fam-calculadoras)}
.logo:has(.pr[data-prod="escritos"]) .simbolo circle.activo{fill:var(--fam-escritos)}
.logo:has(.pr[data-prod="formacion"]) .simbolo circle.activo{fill:var(--fam-guias)}
.logo:has(.pr[data-prod="compliance"],.pr[data-prod="acoso"],.pr[data-prod="transparencia"]) .simbolo circle.activo{fill:var(--fam-cumplimiento)}
.pie .logo .simbolo circle.activo,.pie .sello-pie .simbolo circle.activo{fill:var(--punto)}

/* Tarjetas: filete gris de 1 px, radio 18, sin sombra. Nunca blanco sobre blanco: el filete siempre se ve */
.card,.card.destacada,.gw-kit,.gw-herr,.v2-casilla,.v2-medidor,.v2-paquete,.v2-cierre>div,.gw-lista-gratis li,.calc,.gw-respuesta-card,
.gw-az,.gw-faq details,.cg-paso,.doc-tarjeta,.tarjeta,.caja,.bloque-compra,.siguiente a,
.panel-tinta,.compra,.asistente,.dg-caja,.ge-precio{border-radius:18px; box-shadow:none}
.hoja{box-shadow:none}
.compra,.asistente,.dg-caja,.ge-precio,.hoja{border:1px solid var(--linea,#E1E4EC)}
.card:hover,.gw-kit:hover,.gw-herr:hover,.v2-casilla:hover,.siguiente a:hover,.tarjeta:hover{box-shadow:none}
.card,.gw-kit,.gw-herr,.v2-casilla,.v2-medidor,.v2-paquete,.v2-cierre>div,.gw-lista-gratis li,.calc,.gw-respuesta-card{border:1px solid var(--linea,#E1E4EC)}
/* El filo de 4 px es el color de la familia; sin herramienta, índigo */
.card{border-top:4px solid var(--prod,var(--indigo))}
.card[data-producto],[data-producto] .card.herramienta,.gw-kit[data-producto],.v2-casilla[data-producto]{border-top:4px solid var(--prod)}
.v2-casilla.madre{border-color:var(--panel)}

/* Rótulo de familia: punto de 14 px, nombre de la familia en su tono de texto y el claim de la familia en índigo */
.gw-fam33{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:16px 0 4px; font-size:clamp(18px,2vw,22px); line-height:1.25}
.gw-fam33-punto{width:14px; height:14px; border-radius:50%; background:var(--fam,var(--indigo)); flex:none}
.gw-fam33-nombre{font-size:14px; font-weight:800; letter-spacing:.04em; color:var(--fam-t,var(--indigo))}
.gw-fam33-claim{font-weight:800; color:var(--indigo); letter-spacing:-.01em}
.gw-fam33-claim i,.gw-claim33 i,.gw-firma33 i{font-style:normal; color:var(--punto)}
@media (prefers-color-scheme: dark){ html:root:not([data-theme="light"]) .gw-fam33-claim{color:var(--ink-1,#EEF0F6)} }
html:root[data-theme="dark"] .gw-fam33-claim{color:var(--ink-1,#EEF0F6)}

/* Claim grande de página (portada, precios, quiénes somos): un claim por pantalla, con su punto verde final */
.gw-claim33{margin:0; font-weight:800; font-size:clamp(34px,5vw,60px); line-height:1.02; letter-spacing:-.035em; color:var(--indigo); text-wrap:balance}
@media (prefers-color-scheme: dark){ html:root:not([data-theme="light"]) .gw-claim33{color:var(--ink-1,#EEF0F6)} }
html:root[data-theme="dark"] .gw-claim33{color:var(--ink-1,#EEF0F6)}
.gw-claim33-sub{margin:10px 0 0; font-size:clamp(20px,2.4vw,26px); font-weight:700; color:var(--ink-2); letter-spacing:-.01em}

/* Firma de marca en el pie: «La letra pequeña, a lo grande.» y, de tono común, «No hacemos milagros. Leemos el BOE.» */
.pie .gw-firma33{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 24px; margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.18)}
.pie .gw-firma33 b{font-size:clamp(20px,2.4vw,26px); font-weight:800; letter-spacing:-.02em; color:#FFFFFF}
.pie .gw-firma33 span{font-size:15px; font-weight:600; color:rgba(255,255,255,.85)}
/* Sobre índigo, el texto pequeño del pie al 75 % como mínimo (AA) */
.pie [style*="rgba(255,255,255,.5)"]{color:rgba(255,255,255,.78) !important}
.pie{color:rgba(255,255,255,.82)}

/* Tramas de puntos en colores de marca (versiones -33 de /assets/puntos/): sin los 8 colores antiguos */
.trama{background-image:url(/assets/puntos/franja-33.svg)}
.trama.tinta,.panel-tinta.trama{background-image:url(/assets/puntos/franja-oscura-33.svg)}
.trama.una{background-image:url(/assets/puntos/tu-punto-33.svg)}
.gw-trama::before{background-image:url(/assets/puntos/franja-ancha-33.svg)}
.mq-portada .mq-franja{background-image:url(/assets/puntos/franja-ancha-33.svg)}
@media (prefers-color-scheme: dark){
  html:root:not([data-theme="light"]) .trama{background-image:url(/assets/puntos/franja-oscura-33.svg)}
  html:root:not([data-theme="light"]) .trama.una{background-image:url(/assets/puntos/tu-punto-oscuro-33.svg)}
  html:root:not([data-theme="light"]) .gw-trama::before{background-image:url(/assets/puntos/franja-ancha-oscura-33.svg)}
}
html:root[data-theme="dark"] .trama{background-image:url(/assets/puntos/franja-oscura-33.svg)}
html:root[data-theme="dark"] .trama.una{background-image:url(/assets/puntos/tu-punto-oscuro-33.svg)}
html:root[data-theme="dark"] .gw-trama::before{background-image:url(/assets/puntos/franja-ancha-oscura-33.svg)}

/* Pie igual que convenioslaborales (19/10): la firma va en el sello, a la derecha (copia de marca-33.css) */
.sello-pie .pie-firma{margin-left:auto; font-weight:700; letter-spacing:-.01em; color:#FFFFFF; opacity:1}
.sello-pie .pie-firma i{font-style:normal; color:#8FAF2E}
@media(max-width:600px){.sello-pie{flex-wrap:wrap} .sello-pie .pie-firma{margin-left:0; flex:1 1 100%}}