/* ============================================================
   PREGUNTAS BREVES Y GUÍAS DE LECTURA RÁPIDA
   ============================================================

   La usan /blog/preguntas-breves/, sus cinco páginas, la entrada de la subida
   de convenio y la banda de preguntas del índice del blog. Se carga DESPUÉS de
   article.css y no lo modifica: article.css lleva ?v= en veinte páginas y
   tocarlo obligaba a subir la versión en todas a la vez.

   Una pregunta breve es una respuesta con prueba: lo que se contesta en veinte
   segundos arriba (.answer), y lo que lo sostiene debajo en piezas que se
   entienden de un vistazo —una decisión (.flow), una comparación (.cmp), una
   escala (.meter), un calendario (.months), una tabla de calor (.matrix), un
   recorrido (.journey)— en lugar de párrafos. Cada pieza lleva su texto en el
   HTML, no en una imagen: es lo que lee el buscador y lo que lee quien usa un
   lector de pantalla.

   Reglas heredadas de article.css, que aquí también mandan:

   1) Sin <style> ni style="" (CSP). Lo que en otra web sería un ancho en línea
      —lo que mide una barra, cuántos meses pinta una celda— es una clase
      modificadora: .w-50, .m6...
   2) El estado por defecto de cada pieza es su ESTADO FINAL. Lo que la esconde
      para revelarla vive bajo .js-reveal, que main.js pone solo si hay
      IntersectionObserver y no se pide movimiento reducido.
   3) Colores solo por variables: las piezas cambian de tema sin tocarlas. El
      amarillo es un único acento por pantalla; el turquesa es relleno, y como
      texto va siempre en --color-accent-text.
   4) Nada de cajas con filo de color a un lado: lo que va en caja es la ficha
      (.callout) o una pieza con el borde entero. */

/* Las piezas anchas se abren a 58 rem, como las tablas y rejillas de las demás
   entradas; el recorrido y la tabla de calor, que necesitan más aire, a 66. */
.answer,.kinds,.flow,.cmp,.meter,.months,.matrix-wrap,.docs-wrap,.cs,.deck,.absorb,
.steps-wide{--span:var(--wide)}
.journey,.matrix-wrap,.deck,.qgrid{--span:66rem}


/* ============ CABECERA: CTA Y PORTADA DIBUJADA ============ */
.artihead__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:24px 0 0}
.artihead__cta .btn{padding:14px 22px;font-size:15px}
.artihead__cta a:not(.btn){font-family:var(--font-display);font-size:14px;font-weight:700}

/* El dibujo vive dentro de .cover-frame (article.css), que ya trae el degradado
   de la marca y la lámina de curvas. Todo lo que se pinta lleva clase para que
   el esquema cambie de tema: un fill="#281A40" en el SVG se quedaría violeta
   sobre violeta en oscuro. */
.qsvg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.sv-card{fill:var(--color-bg-elevated);stroke:var(--color-border);stroke-width:1.5}
.sv-card--ink{fill:var(--brand-violet);stroke:var(--brand-violet)}
[data-theme="dark"] .sv-card--ink{fill:var(--violet-600);stroke:var(--violet-200)}
.sv-card--hl{fill:var(--brand-yellow);stroke:var(--yellow-600)}
.sv-card--tint{fill:var(--color-badge-bg);stroke:var(--color-accent)}
.sv-t{font-family:var(--font-display);font-weight:700;fill:var(--color-text)}
.sv-t--on-ink{fill:var(--brand-cream)}
.sv-t--on-hl{fill:var(--brand-violet)}
.sv-t--acc{fill:var(--color-accent-text)}
.sv-s{font-family:var(--font-body);font-weight:500;fill:var(--color-text-muted)}
.sv-s--on-ink{fill:var(--violet-200)}
.sv-s--on-hl{fill:var(--violet-700)}
.sv-k--on-ink{fill:var(--brand-teal)!important}
.sv-k{font-family:var(--font-display);font-weight:700;letter-spacing:.12em;text-transform:uppercase;fill:var(--color-accent-text)}
.sv-line{fill:none;stroke:var(--color-accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sv-line--dash{stroke-dasharray:7 7}
.sv-line--ink{stroke:var(--color-text)}
.sv-line--y{stroke:var(--color-yellow-line)}
.sv-dot{fill:var(--color-accent)}
.sv-dot--y{fill:var(--color-yellow-line)}
.sv-dot--ink{fill:var(--color-text)}
.sv-fill{fill:var(--color-accent)}
.sv-fill--soft{fill:color-mix(in srgb,var(--color-accent) 28%,transparent)}
.sv-fill--y{fill:var(--brand-yellow)}
.sv-ico{fill:none;stroke:var(--color-text);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sv-ico--on-hl{stroke:var(--brand-violet)}
.sv-ico--acc{stroke:var(--color-accent-text)}

/* El dibujo entra al asomar: las líneas se trazan y las tarjetas suben. Solo en
   la cabecera, que es lo primero que se ve. */
.js-reveal .qcover .sv-line:not(.sv-line--dash){stroke-dasharray:100;stroke-dashoffset:100}
.js-reveal .artihead.is-in .qcover .sv-line:not(.sv-line--dash){
  stroke-dashoffset:0;transition:stroke-dashoffset 1.3s cubic-bezier(.3,.6,.3,1) .25s;
}
.js-reveal .qcover .sv-pop{opacity:0;transform:translateY(8px);transform-box:fill-box}
.js-reveal .artihead.is-in .qcover .sv-pop{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.js-reveal .artihead.is-in .qcover .sv-pop:nth-of-type(2){transition-delay:.12s}
.js-reveal .artihead.is-in .qcover .sv-pop:nth-of-type(3){transition-delay:.2s}
.js-reveal .artihead.is-in .qcover .sv-pop:nth-of-type(4){transition-delay:.28s}
.js-reveal .artihead.is-in .qcover .sv-pop:nth-of-type(5){transition-delay:.36s}
.js-reveal .artihead.is-in .qcover .sv-pop:nth-of-type(6){transition-delay:.44s}


/* ============ RESPUESTA CORTA ============
   Lo primero que se lee tras la cabecera y lo que se cita: una frase de
   titular con la respuesta y, debajo, tres datos que la sostienen, cada uno
   con su base legal. Se marca por arriba (filo turquesa→amarillo, el mismo
   gesto de .stat y .profile-card) y lleva las curvas de nivel dentro: ni filo
   a un lado ni caja de aviso. */
.answer{
  position:relative;isolation:isolate;overflow:hidden;
  margin-top:clamp(8px,1.4vw,14px);
  padding:clamp(24px,3.2vw,34px) clamp(22px,3vw,32px) clamp(22px,2.8vw,28px);
  background:var(--color-bg-elevated);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
}
.answer::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--color-accent),var(--color-yellow-line));
}
.answer::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--pattern);background-size:560px;
  opacity:calc(var(--pattern-opacity) * 2.2);
}
.sec .answer__lbl{
  display:flex;align-items:center;gap:12px;margin:0 0 12px;
  font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-text);
}
.answer__lbl::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--color-accent),transparent)}
.sec .answer__t{
  margin:0;font-family:var(--font-display);font-weight:800;
  font-size:clamp(22px,2.9vw,31px);line-height:1.22;letter-spacing:-.015em;
  max-width:36ch;text-wrap:balance;color:var(--color-text);
}
.answer__facts{
  list-style:none;margin:clamp(20px,2.6vw,26px) 0 0;padding:clamp(16px,2vw,20px) 0 0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.2vw,26px);
  border-top:1px dashed var(--color-border);
}
.answer__facts--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.answer__facts--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.answer__fact b{
  display:block;margin:0 0 4px;font-family:var(--font-display);font-size:clamp(26px,3.2vw,36px);
  font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--color-text);
  font-variant-numeric:tabular-nums;
}
.answer__fact b small{font-size:.46em;font-weight:700;letter-spacing:0;margin-left:.2em;color:var(--color-accent-text)}
.answer__fact > span{display:block;font-size:14.5px;line-height:1.5;color:var(--color-text-muted)}
@media (max-width:760px){
  .answer__facts,.answer__facts--2,.answer__facts--4{grid-template-columns:1fr;gap:14px}
  .answer__fact b{font-size:28px}
}

/* Referencia legal en línea: dice de dónde sale lo que se acaba de afirmar sin
   tener que ir a la sección de fuentes. */
.ref{
  display:inline-block;margin:0 .15em;padding:1px 8px 2px;white-space:nowrap;
  font-family:var(--font-display);font-size:.72em;font-weight:700;letter-spacing:.04em;
  color:var(--color-accent-text);background:var(--color-bg-elevated);
  border:1px solid var(--color-border);border-radius:999px;vertical-align:.12em;
}


/* ============ LAS CINCO MODALIDADES ============
   El indefinido va aparte y a todo el ancho porque no es una opción más: es la
   regla, y los otros cuatro son lo que la ley admite como excepción con causa.
   Esa jerarquía es la respuesta de la página, así que se dibuja. */
.kinds{
  list-style:none;margin:clamp(26px,3.6vw,38px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
}
.kind{
  position:relative;display:flex;flex-direction:column;gap:12px;
  padding:22px 20px 20px;border:1px solid var(--color-border);border-radius:var(--radius-lg);
  background:var(--color-bg-elevated);box-shadow:var(--shadow-card);
  transition:transform .25s ease,border-color .25s ease;
}
.kind:hover{transform:translateY(-3px);border-color:var(--color-accent)}
.js-reveal .kinds.is-in .kind:hover{transform:translateY(-3px)}
.kind__ico{
  display:grid;place-items:center;width:46px;height:46px;border-radius:12px;
  background:var(--color-badge-bg);color:var(--color-text);
}
.kind__ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.kind h3{margin:0;font-size:19px;line-height:1.2}
.sec .kind__tag{
  margin:-6px 0 0;font-family:var(--font-display);font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--color-accent-text);
}
.kind p{margin:0;font-size:15px;line-height:1.52}
.kind__k{
  margin:0 0 3px!important;font-family:var(--font-display);font-size:10.5px!important;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--color-text)!important;
}
.kind__care{margin-top:auto!important;padding-top:12px;border-top:1px dashed var(--color-border)}
.kind__care p,.kind__care{color:var(--color-text-muted)}
.kinds--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kind--main{
  grid-column:1/-1;flex-direction:row;align-items:stretch;gap:clamp(18px,3vw,34px);
  padding:clamp(22px,3vw,30px);background:var(--brand-violet);border-color:var(--brand-violet);
  color:var(--brand-cream);overflow:hidden;isolation:isolate;
}
[data-theme="dark"] .kind--main{background:var(--violet-600);border-color:var(--violet-200)}
.kind--main::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("/assets/pattern/Patron_azu.svg");background-size:620px;opacity:.16;
}
.kind--main .kind__ico{background:var(--brand-yellow);color:var(--brand-violet);flex:none;width:58px;height:58px;border-radius:14px}
.kind--main .kind__ico svg{width:32px;height:32px}
.kind--main h3{color:var(--brand-cream);font-size:clamp(22px,2.6vw,28px)}
.kind--main .kind__tag{color:var(--brand-yellow)}
.kind--main p{color:var(--violet-200);font-size:16px}
.kind--main .kind__k{color:var(--brand-cream)!important}
.kind--main .kind__care{border-top-color:var(--violet-500);color:var(--violet-200)}
.kind--main .kind__body{flex:1.3}
.kind--main .kind__tag{margin-top:3px}
.kind--main .kind__body > p:last-child{margin-top:12px}
.kind--main .kind__care{margin-top:0!important;padding-top:0;border-top:0;flex:1;
  padding-left:clamp(18px,3vw,34px);border-left:1px dashed var(--violet-500)}
.js-reveal .kind{opacity:0;transform:translateY(16px)}
.js-reveal .kinds.is-in .kind{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.js-reveal .kinds.is-in .kind:nth-child(2){transition-delay:.1s}
.js-reveal .kinds.is-in .kind:nth-child(3){transition-delay:.17s}
.js-reveal .kinds.is-in .kind:nth-child(4){transition-delay:.24s}
.js-reveal .kinds.is-in .kind:nth-child(5){transition-delay:.31s}
@media (max-width:1000px){.kinds{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){
  .kind--main{flex-direction:column}
  .kind--main .kind__care{padding-left:0;border-left:0;padding-top:14px;border-top:1px dashed var(--violet-500)}
}
@media (max-width:520px){.kinds{grid-template-columns:1fr}}


/* ============ ÁRBOL DE DECISIÓN ============
   Una pregunta por peldaño; si la respuesta es sí, ahí termina el recorrido y
   se dice dónde; si es no, se baja al siguiente. Se lee de arriba abajo con la
   misma lógica con la que se decide, y el número en círculo cose los peldaños
   con una línea. */
.flow{list-style:none;margin:clamp(26px,3.6vw,38px) 0 0;padding:0;counter-reset:flow}
.flow__step{
  counter-increment:flow;position:relative;
  display:grid;grid-template-columns:44px minmax(0,1.25fr) minmax(0,1fr) minmax(0,.62fr);
  gap:10px clamp(14px,2vw,22px);align-items:stretch;padding:0 0 18px;
}
.flow__step::before{
  content:"";position:absolute;left:21px;top:44px;bottom:-2px;width:2px;
  background:repeating-linear-gradient(var(--color-border) 0 6px,transparent 6px 11px);
}
.flow__step:last-child::before{display:none}
.flow__n{
  position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--color-accent);color:var(--brand-violet);
  font-family:var(--font-display);font-weight:800;font-size:16px;
}
.flow__n::before{content:counter(flow)}
.flow__q,.flow__yes,.flow__no{
  padding:14px 18px;border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-bg-elevated);font-size:15.5px;line-height:1.45;
}
.sec .flow__q{font-family:var(--font-display);font-weight:700;font-size:16px;display:flex;align-items:center}
.flow__yes{background:var(--color-badge-bg);border-color:color-mix(in srgb,var(--color-accent) 60%,var(--color-border))}
.flow__yes b,.flow__no b{
  display:block;margin:0 0 2px;font-family:var(--font-display);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-text);
}
.flow__yes strong{display:block;font-family:var(--font-display);font-size:17px;line-height:1.25}
.flow__yes span{display:block;margin-top:3px;font-size:14px;color:var(--color-text-muted)}
.flow__no{background:transparent;border-style:dashed;color:var(--color-text-muted);font-size:14px;display:flex;flex-direction:column;justify-content:center}
.flow__no b{color:var(--color-text-muted)}
.flow__end .flow__n::before{content:"✓"}
.flow__end .flow__q{grid-column:2/-1;background:color-mix(in srgb,var(--color-highlight) 22%,transparent);border-color:var(--color-yellow-line);font-weight:600;font-family:var(--font-body);font-size:15.5px}
.js-reveal .flow__step{opacity:0;transform:translateY(14px)}
.js-reveal .flow.is-in .flow__step{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.js-reveal .flow.is-in .flow__step:nth-child(2){transition-delay:.12s}
.js-reveal .flow.is-in .flow__step:nth-child(3){transition-delay:.24s}
.js-reveal .flow.is-in .flow__step:nth-child(4){transition-delay:.36s}
.js-reveal .flow.is-in .flow__step:nth-child(5){transition-delay:.48s}
@media (max-width:860px){
  .flow__step{grid-template-columns:44px minmax(0,1fr);padding-bottom:22px}
  .flow__q{grid-column:2}
  .flow__yes,.flow__no{grid-column:2}
  .flow__no{padding:10px 16px}
  .flow__end .flow__q{grid-column:2}
}


/* ============ COMPARACIÓN SÍ / NO ============
   Dos columnas con el borde entero: lo que vale y lo que no. El aro del título
   (check o aspa) hace de signo, de modo que la diferencia no depende solo del
   color. */
.cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:clamp(26px,3.6vw,38px) 0 0}
.cmp__col{
  padding:clamp(20px,2.6vw,26px);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  background:var(--color-bg-elevated);box-shadow:var(--shadow-card);
}
.cmp__col--ok{border-color:color-mix(in srgb,var(--color-accent) 65%,var(--color-border))}
.cmp__col--no{border-color:color-mix(in srgb,var(--color-yellow-line) 60%,var(--color-border))}
.cmp__col h3{display:flex;align-items:center;gap:12px;margin:0 0 6px;font-size:19px}
.cmp__col h3::before{
  content:"";flex:none;width:30px;height:30px;border-radius:50%;
  background-repeat:no-repeat;background-position:center;background-size:16px;
}
.cmp__col--ok h3::before{
  background-color:var(--color-accent);
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23281A40" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8.4 6.6 12 13 4.6"/></svg>');
}
.cmp__col--no h3::before{
  background-color:var(--brand-yellow);
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23281A40" stroke-width="2.4" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>');
}
.cmp__sub{margin:0 0 6px;font-size:14.5px;color:var(--color-text-muted)}
.cmp__col ul{list-style:none;margin:10px 0 0;padding:0}
.cmp__col li{padding:11px 0;border-top:1px dashed var(--color-border);font-size:15.5px;line-height:1.5}
.cmp__col li b{display:block;font-family:var(--font-display);font-size:15.5px}
.cmp__col li span{display:block;font-size:14.5px;color:var(--color-text-muted)}
@media (max-width:760px){.cmp{grid-template-columns:1fr}}


/* ============ ESCALA DE DURACIONES ============
   Una barra por caso sobre una pista dividida en meses. El largo de la barra es
   el dato: de un vistazo se ve que seis meses son seis veces un mes, cosa que
   en una lista de cuatro frases no se ve. Los anchos no van en línea (CSP): son
   las clases .w-NN, que ponen --w, y .meter__fill lo lee. */
.meter{margin:clamp(26px,3.6vw,38px) 0 0;padding:clamp(18px,2.4vw,24px);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-elevated);
  box-shadow:var(--shadow-card)}
.sec .meter__cap{margin:0 0 14px;font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-text)}
.meter__row{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,2fr) 6.6rem;gap:6px clamp(12px,2vw,20px);
  align-items:center;padding:11px 0;border-top:1px dashed var(--color-border);
}
.meter__row:first-of-type{border-top:0}
.meter__lbl{font-size:15px;line-height:1.35}
.meter__lbl b{display:block;font-family:var(--font-display);font-size:15.5px}
.meter__lbl span{display:block;font-size:13.5px;color:var(--color-text-muted)}
.meter__bar{
  position:relative;display:block;height:22px;border-radius:6px;overflow:hidden;
  background:color-mix(in srgb,var(--color-bg-subtle) 55%,transparent);
}
/* Las divisiones de mes van por encima de la barra y de la pista: así se leen
   también sobre el relleno y no hay que repetir el degradado en cada .w-NN. */
.meter__bar::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100% / var(--cells,12) - 2px),
    var(--color-bg-elevated) calc(100% / var(--cells,12) - 2px),var(--color-bg-elevated) calc(100% / var(--cells,12)));
}
.meter__fill{display:block;height:100%;width:var(--w,100%);border-radius:6px;background:var(--color-accent)}
.meter__fill--y{background-color:var(--brand-yellow)}
.meter__fill--ghost{background-color:transparent;border:2px dashed var(--color-accent-text);background-image:none}
.meter__val{font-family:var(--font-display);font-weight:800;font-size:17px;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.meter__val small{font-size:12px;font-weight:700;color:var(--color-text-muted);margin-left:2px}
.meter__scale{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,2fr) 6.6rem;gap:6px clamp(12px,2vw,20px);
  margin:8px 0 0;font-size:11.5px;color:var(--color-text-muted);font-family:var(--font-display);font-weight:700;letter-spacing:.06em
}
.meter__scale i{grid-column:2;display:flex;justify-content:space-between;font-style:normal}
.meter__scale em{grid-column:3;visibility:hidden;font-style:normal;font-size:17px}
.meter__note{margin:14px 0 0;font-size:13.5px;color:var(--color-text-muted)}
.meter--6{--cells:6}
.meter--12{--cells:12}
.w-8{--w:8.33%;--wn:8.33}.w-17{--w:16.67%;--wn:16.67}.w-25{--w:25%;--wn:25}.w-33{--w:33.33%;--wn:33.33}
.w-50{--w:50%;--wn:50}.w-67{--w:66.67%;--wn:66.67}.w-75{--w:75%;--wn:75}.w-100{--w:100%;--wn:100}
.js-reveal .meter__fill{width:0}
.js-reveal .meter.is-in .meter__fill{width:var(--w);transition:width 1s cubic-bezier(.2,.7,.2,1) .15s}
.js-reveal .meter.is-in .meter__row:nth-of-type(2) .meter__fill{transition-delay:.3s}
.js-reveal .meter.is-in .meter__row:nth-of-type(3) .meter__fill{transition-delay:.45s}
.js-reveal .meter.is-in .meter__row:nth-of-type(4) .meter__fill{transition-delay:.6s}
.js-reveal .meter.is-in .meter__row:nth-of-type(5) .meter__fill{transition-delay:.75s}
@media (max-width:640px){
  .meter__row{grid-template-columns:minmax(0,1fr) auto}
  .meter__lbl{grid-column:1}
  .meter__val{grid-column:2;grid-row:1}
  .meter__bar{grid-column:1/-1}
  .meter__scale{grid-template-columns:1fr}
  .meter__scale i{grid-column:1}
  .meter__scale em{display:none}
}


/* ============ VENTANA DE 24 MESES ============
   Dieciocho meses en veinticuatro: la regla que convierte en fija a una
   persona con contratos por circunstancias de la producción. Dibujada como lo
   que es —veinticuatro casillas, dieciocho llenas— se entiende sin leer el
   artículo. */
.months{
  margin:clamp(26px,3.6vw,38px) 0 0;padding:clamp(18px,2.4vw,24px);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-elevated);
  box-shadow:var(--shadow-card);
}
.sec .months__cap{margin:0 0 14px;font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-text)}
.months ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px}
.months li{
  height:34px;border-radius:4px;border:1px solid var(--color-border);
  background:color-mix(in srgb,var(--color-bg-subtle) 55%,transparent);
  font-size:0;
}
.months li.on{background:var(--color-accent);border-color:var(--color-accent)}
.months li.on:nth-child(18){box-shadow:inset -3px 0 0 var(--brand-violet)}
.months__scale{
  display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px;margin:8px 0 0;
  font-family:var(--font-display);font-size:11px;font-weight:700;color:var(--color-text-muted);
}
.months__scale span{grid-column:1/7}
.months__scale span:nth-child(2){grid-column:7/13}
.months__scale span:nth-child(3){grid-column:13/19}
.months__scale span:nth-child(4){grid-column:19/25;text-align:right}
.months__legend{
  display:flex;flex-wrap:wrap;gap:8px 22px;margin:16px 0 0;font-size:14px;line-height:1.4;color:var(--color-text-muted);
}
.months__legend span{display:inline-flex;align-items:center;gap:8px}
.months__legend i{width:14px;height:14px;border-radius:3px;background:var(--color-accent);display:inline-block}
.months__legend i.off{background:transparent;border:1px solid var(--color-border)}
.months__flag{
  display:inline-block;margin:14px 0 0;padding:7px 14px;border-radius:999px;
  background:var(--brand-yellow);color:var(--brand-violet);
  font-family:var(--font-display);font-size:13.5px;font-weight:700;
}
.js-reveal .months li.on{background:color-mix(in srgb,var(--color-bg-subtle) 55%,transparent);border-color:var(--color-border)}
.js-reveal .months.is-in li.on{background:var(--color-accent);border-color:var(--color-accent);transition:background-color .3s ease,border-color .3s ease}
.js-reveal .months.is-in li:nth-child(1){transition-delay:.02s}.js-reveal .months.is-in li:nth-child(3){transition-delay:.08s}
.js-reveal .months.is-in li:nth-child(5){transition-delay:.14s}.js-reveal .months.is-in li:nth-child(7){transition-delay:.2s}
.js-reveal .months.is-in li:nth-child(9){transition-delay:.26s}.js-reveal .months.is-in li:nth-child(11){transition-delay:.32s}
.js-reveal .months.is-in li:nth-child(13){transition-delay:.38s}.js-reveal .months.is-in li:nth-child(15){transition-delay:.44s}
.js-reveal .months.is-in li:nth-child(17){transition-delay:.5s}.js-reveal .months.is-in li:nth-child(18){transition-delay:.56s}
.js-reveal .months.is-in li:nth-child(even){transition-delay:.3s}
@media (max-width:640px){
  .months ol,.months__scale{gap:2px}
  .months li{height:26px}
}


/* ============ TABLA DE CALOR ============
   Reutiliza .dtable (article.css), que a menos de 760 px se parte en tarjetas
   con data-l. Lo propio es el color de la celda: más meses, más turquesa. El
   número manda; el color solo lo refuerza, así que se lee igual en gris. */
.matrix-wrap{margin:clamp(24px,3.4vw,36px) 0 0}
.matrix-wrap .dtable-wrap{margin-top:0}
.matrix th[scope="col"]{text-align:center}
.matrix td{text-align:center;font-family:var(--font-display);font-weight:800;font-size:19px;line-height:1.1;vertical-align:middle;padding:15px 10px}
.matrix td small{display:block;margin-top:5px;font-family:var(--font-body);font-size:12px;font-weight:500;line-height:1.3;color:var(--color-text)}
.matrix tbody th small{display:block;margin-top:2px;font-size:13px;font-weight:500;color:var(--color-text-muted);line-height:1.35}
.matrix .m6{background:color-mix(in srgb,var(--color-accent) 56%,transparent)}
.matrix .m4{background:color-mix(in srgb,var(--color-accent) 38%,transparent)}
.matrix .m3{background:color-mix(in srgb,var(--color-accent) 22%,transparent)}
.matrix .m15{background:color-mix(in srgb,var(--color-highlight) 34%,transparent)}
.matrix tbody tr:hover td{filter:brightness(1.04)}
/* En oscuro el turquesa mezclado con transparencia sobre el violeta se apaga:
   se mezcla contra el violeta de superficie y el texto de las celdas claras
   pasa a violeta para conservar el contraste. */
[data-theme="dark"] .matrix .m6{background:color-mix(in srgb,var(--brand-teal) 70%,var(--violet-700));color:var(--brand-violet)}
[data-theme="dark"] .matrix .m4{background:color-mix(in srgb,var(--brand-teal) 45%,var(--violet-700))}
[data-theme="dark"] .matrix .m3{background:color-mix(in srgb,var(--brand-teal) 24%,var(--violet-700))}
[data-theme="dark"] .matrix .m15{background:color-mix(in srgb,var(--brand-yellow) 52%,var(--violet-700));color:var(--brand-violet)}
[data-theme="dark"] .matrix .m15 small{color:var(--brand-violet)}
[data-theme="dark"] .matrix__legend .m6{background:color-mix(in srgb,var(--brand-teal) 70%,var(--violet-700))}
[data-theme="dark"] .matrix__legend .m4{background:color-mix(in srgb,var(--brand-teal) 45%,var(--violet-700))}
[data-theme="dark"] .matrix__legend .m3{background:color-mix(in srgb,var(--brand-teal) 24%,var(--violet-700))}
[data-theme="dark"] .matrix__legend .m15{background:color-mix(in srgb,var(--brand-yellow) 52%,var(--violet-700))}
.matrix__legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin:14px 0 0;font-size:13.5px;color:var(--color-text-muted)}
.matrix__legend span{display:inline-flex;align-items:center;gap:8px}
.matrix__legend i{display:inline-block;width:18px;height:14px;border-radius:3px}
.matrix__legend .m6{background:color-mix(in srgb,var(--color-accent) 56%,transparent)}
.matrix__legend .m4{background:color-mix(in srgb,var(--color-accent) 38%,transparent)}
.matrix__legend .m3{background:color-mix(in srgb,var(--color-accent) 22%,transparent)}
.matrix__legend .m15{background:color-mix(in srgb,var(--color-highlight) 34%,transparent)}
@media (max-width:760px){
  .matrix td{display:flex;align-items:baseline;justify-content:space-between;gap:12px;text-align:right;padding:9px 12px;border-radius:6px;margin-top:4px;font-size:18px}
  .matrix td::before{margin:0;text-align:left;flex:1}
  .matrix td small{display:none}
}


/* ============ RECORRIDO ============
   Hileras de paradas unidas por una línea, con un punto por parada. Sirve para
   lo que ocurre en el tiempo —los plazos de la documentación, los cinco
   momentos de una incorporación— y para el índice de las preguntas breves.
   En pantalla ancha va en horizontal; por debajo de 900 px se endereza y la
   línea pasa al costado, que es donde un dedo la sigue bajando. */
.journey{
  --stops:3;list-style:none;margin:clamp(28px,3.8vw,42px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(var(--stops),minmax(0,1fr));gap:0 clamp(12px,1.6vw,18px);
  counter-reset:stop;
}
.journey--4{--stops:4}
.journey--5{--stops:5}
.stop{counter-increment:stop;position:relative;padding:38px 0 0}
.stop::before{
  content:"";position:absolute;left:0;right:calc(-1 * clamp(12px,1.6vw,18px));top:11px;height:2px;
  background:linear-gradient(90deg,var(--color-accent),color-mix(in srgb,var(--color-accent) 35%,var(--color-border)));
}
.stop:last-child::before{right:auto;width:42px;background:var(--color-accent)}
.stop::after{
  content:counter(stop);position:absolute;left:0;top:0;display:grid;place-items:center;
  width:24px;height:24px;border-radius:50%;background:var(--color-accent);color:var(--brand-violet);
  font-family:var(--font-display);font-weight:800;font-size:12px;
}
.stop--y::after{background:var(--brand-yellow);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-yellow) 40%,transparent)}
.stop__card{
  height:100%;display:flex;flex-direction:column;gap:10px;padding:18px 18px 16px;
  border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-elevated);
  box-shadow:var(--shadow-card);
}
.sec .stop__when{
  margin:0;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--color-accent-text);
}
.stop__t{margin:0;font-family:var(--font-display);font-size:18px;font-weight:800;line-height:1.2;letter-spacing:-.01em}
.stop__card ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.stop__card li{
  position:relative;padding:8px 0 8px 20px;border-top:1px dashed var(--color-border);
  font-size:14.5px;line-height:1.45;color:var(--color-text);
}
.stop__card li:first-child{border-top:0;padding-top:2px}
.stop__card li::before{
  content:"";position:absolute;left:2px;top:1.05em;width:8px;height:8px;border-radius:50%;
  box-shadow:inset 0 0 0 2px var(--color-accent-text);
  background:color-mix(in srgb,var(--color-accent) 30%,transparent);
}
.stop__card li:first-child::before{top:.62em}
.stop__card li b{font-family:var(--font-display);font-weight:700}
.stop__card li small{display:block;margin-top:2px;font-size:12px;letter-spacing:.03em;color:var(--color-accent-text);font-family:var(--font-display);font-weight:700}
.sec .stop__m{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:4px}
.stop__m .tag{margin:0}
.stop__m em{font-style:normal;font-family:var(--font-display);font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--color-accent-text)}
.stop__d{display:block;margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--color-text-muted)}
.stop__foot{margin:auto 0 0;padding-top:8px;font-size:13px;line-height:1.45;color:var(--color-text-muted)}
.js-reveal .stop{opacity:0;transform:translateY(16px)}
.js-reveal .journey.is-in .stop{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.js-reveal .journey.is-in .stop:nth-child(2){transition-delay:.12s}
.js-reveal .journey.is-in .stop:nth-child(3){transition-delay:.24s}
.js-reveal .journey.is-in .stop:nth-child(4){transition-delay:.36s}
.js-reveal .journey.is-in .stop:nth-child(5){transition-delay:.48s}
@media (max-width:1000px){
  .journey--5{--stops:3}
  .journey--5 .stop:nth-child(3)::before{right:calc(-1 * clamp(12px,1.6vw,18px));width:auto}
  .journey--5 .stop:nth-child(n+4){margin-top:26px}
  .journey--5 .stop:nth-child(3)::before{background:linear-gradient(90deg,var(--color-accent),transparent)}
  .journey--5 .stop:last-child::before{display:block}
}
@media (max-width:860px){
  .journey,.journey--4,.journey--5{--stops:1}
  .stop,.journey--5 .stop:nth-child(n+4){padding:0 0 18px 40px;margin-top:0}
  .stop::before,.journey--5 .stop:nth-child(3)::before{
    left:11px;right:auto;top:26px;bottom:0;width:2px;height:auto;
    background:linear-gradient(var(--color-accent),color-mix(in srgb,var(--color-accent) 35%,var(--color-border)));
  }
  .stop:last-child::before,.journey--5 .stop:last-child::before{display:none}
}


/* ============ DOCUMENTOS Y ETIQUETAS ============
   Cada documento con su base legal y una etiqueta que dice si es obligación o
   buena práctica: en una consultora TIC se piden muchas cosas por costumbre y
   el lector necesita saber cuáles tienen detrás una norma. */
.tag{
  display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;vertical-align:.1em;
  font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;
}
.tag--law{background:var(--color-badge-bg);color:var(--color-badge-text);border:1px solid var(--color-accent)}
.tag--rec{background:transparent;color:var(--color-text);border:1px solid var(--color-yellow-line)}
.docs-wrap{margin:clamp(24px,3.4vw,36px) 0 0}
.docs-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 14px;font-size:13.5px;color:var(--color-text-muted)}
.docs-legend .tag{margin:0 6px 0 0}

/* Lista de lo que debe contener la información escrita (RD 723/2026): una
   rejilla de fichas cortas, no veinte viñetas seguidas. */
.items{list-style:none;margin:clamp(24px,3.4vw,34px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.item{
  padding:16px 16px 14px;border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-bg-elevated);
}
.item b{display:block;margin:0 0 4px;font-family:var(--font-display);font-size:15.5px;line-height:1.25}
.item b i{display:block;margin-bottom:5px;font-style:normal;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-text)}
.item span{display:block;font-size:14px;line-height:1.5;color:var(--color-text-muted)}
.item--new{border-color:color-mix(in srgb,var(--color-yellow-line) 60%,var(--color-border));background:color-mix(in srgb,var(--color-highlight) 12%,var(--color-bg-elevated))}
.js-reveal .item{opacity:0;transform:translateY(12px)}
.js-reveal .items.is-in .item{opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease}
.js-reveal .items.is-in .item:nth-child(3n+2){transition-delay:.08s}
.js-reveal .items.is-in .item:nth-child(3n){transition-delay:.16s}
@media (max-width:900px){.items{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.items{grid-template-columns:1fr}}
.items{--span:var(--wide)}


/* ============ LAS CUATRO C ============
   El marco de Bauer para el onboarding. En español las cuatro empiezan por C,
   así que la inicial grande es el dibujo y no hace falta un icono por cada una. */
.cs{list-style:none;margin:clamp(26px,3.6vw,38px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.c{
  position:relative;overflow:hidden;padding:22px 18px 18px;border:1px solid var(--color-border);
  border-radius:var(--radius-lg);background:var(--color-bg-elevated);box-shadow:var(--shadow-card);
}
.c__k{
  position:absolute;right:6px;bottom:-34px;font-family:var(--font-display);font-weight:800;
  font-size:128px;line-height:1;letter-spacing:-.05em;color:var(--color-accent);opacity:.16;pointer-events:none;
}
.c--y .c__k{color:var(--color-yellow-line);opacity:.26}
.sec .c__n{margin:0 0 8px;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-text)}
.c h3{position:relative;margin:0 0 8px;font-size:20px}
.c p{position:relative;margin:0;font-size:14.5px;line-height:1.5;color:var(--color-text-muted)}
.c p + p{margin-top:10px;padding-top:10px;border-top:1px dashed var(--color-border)}
.c p b{color:var(--color-text);font-family:var(--font-display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:2px}
.js-reveal .c{opacity:0;transform:translateY(16px)}
.js-reveal .cs.is-in .c{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.js-reveal .cs.is-in .c:nth-child(2){transition-delay:.1s}
.js-reveal .cs.is-in .c:nth-child(3){transition-delay:.2s}
.js-reveal .cs.is-in .c:nth-child(4){transition-delay:.3s}
@media (max-width:980px){.cs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.cs{grid-template-columns:1fr}}


/* ============ ABSORCIÓN DE UNA SUBIDA ============
   El ejemplo de la subida de convenio como lo que es: dos barras de la misma
   escala. Arriba, el salario de convenio antes y después de la subida; debajo,
   el salario real. Lo que queda entre las dos es la mejora, y se ve cómo la
   subida se come una parte de ella sin que el salario real se mueva.

   La escala empieza en 28.000 € y no en 0: la diferencia entre 30.000 y 30.900
   es un 3 % y, desde cero, se vería como una raya. Va dicho en el pie, porque
   un eje que no empieza en cero tiene que avisarlo. */
.absorb{margin:clamp(26px,3.6vw,38px) 0 0;padding:clamp(18px,2.4vw,26px);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-elevated);box-shadow:var(--shadow-card)}
.sec .absorb__cap{margin:0 0 16px;font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-text)}
.absorb__case{padding:14px 0 6px;border-top:1px dashed var(--color-border)}
.absorb__case:first-of-type{border-top:0;padding-top:0}
.absorb__h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin:0 0 10px}
.absorb__h b{font-family:var(--font-display);font-size:16px}
.absorb__h span{font-size:14px;color:var(--color-text-muted)}
.absorb__row{display:grid;grid-template-columns:7.2rem minmax(0,1fr);gap:8px 14px;align-items:center;margin:6px 0}
.absorb__lbl{font-family:var(--font-display);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)}
.absorb__bar{position:relative;display:flex;height:30px;border-radius:6px;overflow:hidden;
  background:color-mix(in srgb,var(--color-bg-subtle) 55%,transparent)}
.absorb__seg{display:flex;align-items:center;height:100%;padding:0 7px;white-space:nowrap;overflow:hidden;
  font-family:var(--font-display);font-size:12.5px;font-weight:700;color:var(--brand-violet)}
.absorb__seg--conv{background:var(--color-accent)}
.absorb__seg--up{background:repeating-linear-gradient(135deg,var(--teal-300) 0 6px,var(--color-accent) 6px 12px)}
.absorb__seg--gap{background:var(--brand-yellow)}
.absorb__seg--add{background:repeating-linear-gradient(135deg,var(--brand-yellow) 0 6px,color-mix(in srgb,var(--brand-yellow) 60%,var(--color-bg-elevated)) 6px 12px);border-left:2px dashed var(--yellow-600)}
.absorb__seg--abs{background:color-mix(in srgb,var(--brand-yellow) 55%,transparent);border-left:2px dashed var(--yellow-600)}
.absorb__seg--none{background:transparent;color:var(--color-text-muted)}
/* Anchos: 100 % = 8.000 € (28.000 → 36.000). Una clase por tramo. */
.ab-30000{width:25%}   /* 30.000 − 28.000 = 2.000 */
.ab-30400{width:30%}
.ab-30900{width:36.25%}
.ab-900{width:11.25%}
.ab-6000{width:75%}
.ab-5100{width:63.75%}
.ab-36000{width:100%}
.ab-400{width:5%}
.ab-500{width:6.25%}
.ab-0{width:0}
.absorb__mark{display:grid;grid-template-columns:7.2rem minmax(0,1fr);gap:8px 14px;margin:4px 0 0;font-size:13px;color:var(--color-text-muted)}
.absorb__mark span{grid-column:2}
.absorb__out{margin:10px 0 0;padding:10px 14px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-accent) 12%,transparent);
  font-size:14.5px;line-height:1.5}
.absorb__out b{font-family:var(--font-display)}
.absorb__out--warn{background:color-mix(in srgb,var(--color-highlight) 24%,transparent)}
.absorb__axis{margin:14px 0 0;font-size:12.5px;color:var(--color-text-muted)}
.js-reveal .absorb__seg{max-width:0;padding-left:0;padding-right:0;opacity:0}
.js-reveal .absorb.is-in .absorb__seg{max-width:100%;padding-left:7px;padding-right:7px;opacity:1;transition:max-width .9s cubic-bezier(.2,.7,.2,1),opacity .4s ease,padding .4s ease}
.js-reveal .absorb.is-in .absorb__case:nth-of-type(2) .absorb__seg{transition-delay:.35s}
@media (max-width:640px){
  .absorb__row,.absorb__mark{grid-template-columns:1fr}
  .absorb__mark span{grid-column:1}
  .absorb__seg{font-size:11.5px;padding:0 6px}
}


/* ============ RESUMEN EN DIAPOSITIVAS ============
   La versión de cada pregunta que se lleva a LinkedIn, enseñada aquí tal cual:
   una tira que se desliza con anclaje (scroll-snap), sin JavaScript. El
   contenedor es enfocable para que se pueda recorrer con las flechas del
   teclado. Una pieza que solo se mueve con el ratón no es accesible. */
.deck{margin:clamp(26px,3.6vw,38px) 0 0}
.sec .deck__hint{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted)}
.deck__hint svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.deck__scroll{
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--color-accent) transparent;padding:4px 2px 14px;
}
.deck__scroll:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:var(--radius-md)}
.deck__track{list-style:none;margin:0;padding:0;display:flex;gap:14px;width:max-content}
.slide{
  position:relative;isolation:isolate;overflow:hidden;flex:0 0 min(78vw,300px);aspect-ratio:4/5;scroll-snap-align:start;
  display:flex;flex-direction:column;justify-content:space-between;padding:22px 20px 20px;
  border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-elevated);box-shadow:var(--shadow-card);
}
.slide::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--pattern);background-size:420px;background-position:70% 30%;opacity:calc(var(--pattern-opacity) * 3);
}
.sec .slide__n{margin:0;display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-text)}
.slide__n::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--color-accent),transparent)}
.sec .slide__t{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(21px,2.1vw,25px);line-height:1.16;letter-spacing:-.015em;text-wrap:balance;color:var(--color-text)}
.slide__t .u-mark{white-space:normal}
.sec .slide__foot{margin:0;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted)}
.slide--cover{background:var(--brand-violet);border-color:var(--brand-violet)}
[data-theme="dark"] .slide--cover{background:var(--violet-600);border-color:var(--violet-200)}
.slide--cover::before{background-image:url("/assets/pattern/Patron_azu.svg");opacity:.22}
.slide--cover .slide__n{color:var(--brand-yellow)}
.slide--cover .slide__n::after{background:linear-gradient(90deg,var(--brand-yellow),transparent)}
.slide--cover .slide__t{color:var(--brand-cream);font-size:clamp(24px,2.5vw,29px)}
.slide--cover .slide__foot{color:var(--violet-200)}
.slide--end{background:var(--color-accent);border-color:var(--color-accent)}
.slide--end::before{opacity:.18;background-image:url("/assets/pattern/Patron_vio.svg")}
.slide--end .slide__n,.slide--end .slide__t,.slide--end .slide__foot{color:var(--brand-violet)}
.slide--end .slide__n::after{background:linear-gradient(90deg,var(--brand-violet),transparent)}
.slide--end .slide__foot{font-weight:800}
.js-reveal .deck .slide{opacity:0;transform:translateY(14px)}
.js-reveal .deck.is-in .slide{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.js-reveal .deck.is-in .slide:nth-child(2){transition-delay:.08s}
.js-reveal .deck.is-in .slide:nth-child(3){transition-delay:.16s}
.js-reveal .deck.is-in .slide:nth-child(4){transition-delay:.24s}
@media (min-width:700px){.slide{flex-basis:260px}}


/* ============ ÍNDICE DE PREGUNTAS ============
   Tarjetas del hub y banda del índice del blog. Todo el recuadro es el enlace
   (el ::after del titular se estira), como en .post de style.css, y el rótulo
   «Leer la respuesta» es solo señal: el enlace con el texto útil es el titular. */
.qgrid{list-style:none;margin:clamp(26px,3.6vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.qcard{
  position:relative;display:flex;flex-direction:column;gap:12px;padding:22px 22px 20px;
  border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-elevated);
  box-shadow:var(--shadow-card);transition:transform .25s ease,border-color .25s ease;
}
.qcard:hover,.qcard:focus-within{transform:translateY(-3px);border-color:var(--color-accent)}
.js-reveal .qgrid.is-in .qcard:hover{transform:translateY(-3px)}
.qcard__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.qcard__n{font-family:var(--font-display);font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--color-accent-text)}
.qcard__ico{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:var(--color-badge-bg);color:var(--color-text)}
.qcard__ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.qcard h3{margin:0;font-size:20px;line-height:1.2;letter-spacing:-.01em}
.qcard h3 a{color:inherit;text-decoration:none}
.qcard h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--radius-lg)}
.qcard h3 a:focus-visible{outline:none}
.qcard:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.qcard__a{margin:0;font-size:15px;line-height:1.55;color:var(--color-text-muted)}
.qcard__refs{display:flex;flex-wrap:wrap;gap:6px;margin:auto 0 0;padding:12px 0 0;border-top:1px dashed var(--color-border);list-style:none}
.qcard__refs li{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--color-text-muted);
  padding:2px 9px;border:1px solid var(--color-border);border-radius:999px}
.qcard__more{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:13.5px;font-weight:700;color:var(--color-text)}
.qcard__more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.qcard:hover .qcard__more svg{transform:translateX(3px)}
.qcard--ask{background:var(--brand-violet);border-color:var(--brand-violet);color:var(--brand-cream);overflow:hidden;isolation:isolate}
[data-theme="dark"] .qcard--ask{background:var(--violet-600);border-color:var(--violet-200)}
.qcard--ask::before{content:"";position:absolute;inset:0;z-index:-1;background-image:url("/assets/pattern/Patron_azu.svg");background-size:560px;opacity:.18}
.qcard--ask h3,.qcard--ask .qcard__more{color:var(--brand-cream)}
.qcard--ask .qcard__a{color:var(--violet-200)}
.qcard--ask .qcard__n{color:var(--brand-yellow)}
.qcard--ask .qcard__ico{background:var(--brand-yellow);color:var(--brand-violet)}
.js-reveal .qcard{opacity:0;transform:translateY(16px)}
.js-reveal .qgrid.is-in .qcard{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1),border-color .25s ease}
.js-reveal .qgrid.is-in .qcard:nth-child(3n+2){transition-delay:.08s}
.js-reveal .qgrid.is-in .qcard:nth-child(3n){transition-delay:.16s}
@media (max-width:980px){.qgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.qgrid{grid-template-columns:1fr}}

/* Banda del índice del blog: la misma tarjeta, en cinco columnas finas. */
.qband{margin-top:clamp(18px,2.4vw,26px);padding:clamp(22px,3vw,32px);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  background:color-mix(in srgb,var(--color-bg-elevated) 82%,transparent);position:relative;overflow:hidden;isolation:isolate}
.qband::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--color-accent),var(--color-yellow-line))}
.qband__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px;margin:0 0 18px}
.qband__head h2{margin:0;font-size:clamp(22px,2.6vw,30px);max-width:none}
.qband__head p:not(.overline){margin:6px 0 0;max-width:46ch;color:var(--color-text-muted);font-size:15.5px}
.qband__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;counter-reset:qb}
.qband__list li{counter-increment:qb;position:relative}
.qband__list a{
  display:flex;flex-direction:column;gap:8px;height:100%;padding:14px 14px 15px;border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-bg-elevated);text-decoration:none;color:var(--color-text);
  font-family:var(--font-display);font-size:14.5px;font-weight:700;line-height:1.3;
  transition:border-color .2s,background-color .2s,transform .2s;
}
.qband__list a::before{content:counter(qb,decimal-leading-zero);font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--color-accent-text)}
.qband__list a:hover{border-color:var(--color-accent);background:var(--color-badge-bg);transform:translateY(-2px)}
.qband__list a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (max-width:1000px){.qband__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.qband__list{grid-template-columns:1fr}}


/* ============ CIERRE DE LAS PREGUNTAS ============
   El CTA de cada pregunta es una oferta concreta sobre esa pregunta, no un
   «contacte con nosotros» genérico. Usa .cta (style.css), igual que las demás
   páginas; aquí solo el rótulo de lo que conviene tener a mano. */
.cta__bring{
  display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none;
}
.cta__bring li{
  padding:6px 13px;border:1px solid color-mix(in srgb,var(--brand-cream) 35%,transparent);border-radius:999px;
  font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--brand-cream);
}
.sec .cta__bringlbl{margin:26px 0 0;font-family:var(--font-display);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-yellow)}
.cta__bringlbl + .cta__bring{margin-top:10px}
/* Ficha con botón: el aviso intermedio que lleva al formulario sin esperar al
   final de la página. */
.qcall .btn{margin-top:14px;padding:13px 20px;font-size:15px}
.qcall p + p{margin-top:8px}

/* Pie de la página con las preguntas hermanas. */
.qlinks{list-style:none;margin:clamp(20px,2.6vw,28px) 0 0;padding:0;display:grid;gap:10px}
.qlinks a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;
  border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-elevated);
  font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--color-text);text-decoration:none;
  transition:border-color .2s,background-color .2s;
}
.qlinks a:hover{border-color:var(--color-accent);background:var(--color-badge-bg)}
.qlinks a svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--color-accent-text)}
.qlinks a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.qlinks{--span:var(--wide)}

/* El título de las secciones de estas páginas admite una línea más: son
   preguntas, no sustantivos. */
.article-editorial .sec > .wrap > h2{max-width:26ch}

/* Pasos con subtítulo propio (checklists largas de las preguntas). */
.sec h3.sub{margin:30px 0 6px;font-size:19px;max-width:46rem}
.article-centered .sec:not(.cta):not(.related) > .wrap > h3.sub{
  margin-left:max(0px,calc((100% - var(--col)) / 2));margin-right:max(0px,calc((100% - var(--col)) / 2))
}

@media (prefers-reduced-motion:reduce){
  .kind,.qcard,.qband__list a,.flow__step,.stop,.slide{transition:none!important}
}

/* Rótulo menor dentro de «Seguir leyendo»: separa las preguntas hermanas de las
   guías sin repetir el rótulo grande. */
.sec .strip__t--sub{margin:clamp(18px,2.4vw,24px) 0 0;font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted)}
.related .qlinks + .posts{margin-top:clamp(26px,3.4vw,38px)}
@media (max-width:700px){.kinds--2{grid-template-columns:1fr}}

/* Cierre de una sección: la frase final de una lista de errores o de pasos. */
.note-after{max-width:41rem}

/* El párrafo que sigue a una pieza ancha necesita aire: sin él la última fila de
   la pieza y el texto se leían como un solo bloque. */
.article-editorial :is(.kinds,.flow,.cmp,.meter,.months,.matrix-wrap,.journey,.cs,.absorb,.items,.deck,.docs-wrap,.qgrid,.answer,.dtable-wrap) + p{
  margin-top:clamp(22px,3vw,30px);
}

/* En pantallas estrechas el rótulo de la portada ocuparía dos líneas encima del
   dibujo y tapa su parte baja: pasa a ir debajo, y el dibujo conserva su
   proporción en vez de rellenar el marco. */
@media (max-width:600px){
  .qcover{aspect-ratio:auto;display:flex;flex-direction:column}
  .qcover .qsvg{position:relative;inset:auto;height:auto;aspect-ratio:8/5;flex:none}
  .qcover .cover-frame__cap{position:static;padding:0 12px 12px}
}

/* Autoría al pie de las fuentes: quién firma y con qué colegiación. */
.sec .byline{margin:22px 0 0;font-size:14.5px;line-height:1.55;color:var(--color-text-muted);max-width:41rem}
.sec .byline a{color:var(--color-text)}