/* ════════════════════════════════════════════════════════════════════════
   CIFRA Consultorías · la escena de la cabecera (19-oct-2026)
   «Una mañana en el buzón», en corto: a las 7:30 el sistema entra con el certificado del
   despacho y el apoderamiento de cada cliente en los buzones de 42 clientes (Hacienda,
   Seguridad Social y Tráfico), abre la notificación de Hacienda de Taller Ruiz, el
   asistente (IA) se la explica al cliente por correo, y el 303 de la Ferretería Robles
   (2.318,40 €, el de su web) queda listo para el clic del asesor. Despacho, clientes e
   importes inventados, los mismos de la web de Consultorías.
   ════════════════════════════════════════════════════════════════════════ */
.t-consultorias .escena-viva { --esc-papel: #FCFAF5; --esc-tinta: #15223A; --esc-tinta-2: #535E73; --esc-linea: #E6DFD0; }
.t-consultorias .escena-viva__caja { aspect-ratio: 1 / 1.04; }
.t-consultorias .ventana__cab { font-family: "Newsreader", Georgia, serif; font-size: .95em; font-weight: 500; }
.t-consultorias .sello { --esc-sello: #F3EEE3; --esc-sobre-sello: #15223A; }

.k-buzones { left: 0; top: 0; width: 49%; z-index: 1; }
.k-buzones .ventana__cuerpo { display: grid; gap: .45em; }
.k-cuenta { display: flex; align-items: baseline; justify-content: space-between; font-size: .82em; color: #535E73; }
.k-cuenta b { font: 500 1.9em/1 var(--f-dato); color: #15223A; letter-spacing: -0.03em; }
.k-barra { height: .4em; border-radius: 1em; background: #EEE8DB; overflow: hidden; }
.k-barra i { display: block; height: 100%; width: 0; background: #1E9D63; border-radius: inherit; transition: width 1.6s var(--suave); }
.k-barra.llena i { width: 100%; }
.k-sede { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .45em .55em; border-radius: .5em; background: #F6F1E6; font-size: .8em; }
.k-sede small { color: #535E73; font-size: .9em; }
.k-sede span:last-child { width: 1.3em; height: 1.3em; flex: none; border-radius: 50%; border: .14em solid #C9BFAB; transition: background-color .3s, border-color .3s; }
.k-sede.hecha span:last-child { background: #1E9D63 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat; border-color: #1E9D63; }
.k-nuevo { justify-self: start; padding: .35em .7em; border-radius: 999px; background: #F4ECD3; color: #7E6420; font: 500 .76em/1 var(--f-dato); letter-spacing: .04em; }

.k-noti { right: 0; top: 5%; width: 49%; z-index: 2; }
.k-noti .ventana__cuerpo { display: grid; gap: .55em; font-size: .86em; line-height: 1.45; }
.k-sobre { position: relative; height: 5.4em; border-radius: .5em; background: #EEE8DB; overflow: hidden; }
.k-sobre::before { content: ""; position: absolute; inset: 0 0 auto; height: 60%; background: #E2DACA; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform .7s var(--suave); }
.k-sobre::after { content: "AEAT · DEHú"; position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); font: 500 .78em/1 var(--f-dato); letter-spacing: .1em; color: #7E6420; padding: .45em .6em; border: .12em solid #C9A84C; border-radius: .3em; background: #FCFAF5; transition: opacity .4s; }
.k-sobre.abierto::before { transform: scaleY(-1); }
.k-sobre.abierto::after { opacity: 0; }
.k-explica { padding: .6em .7em; border-radius: .6em; background: #E3F0E6; color: #15223A; border-left: .22em solid #1E9D63; }
.k-explica b { display: block; font-size: .9em; margin-bottom: .2em; color: #126B41; }
.k-plazo { display: flex; justify-content: space-between; font: 500 .8em/1.3 var(--f-dato); color: #535E73; }

.k-modelo { left: 0; bottom: 0; width: 60%; z-index: 3; }
.k-modelo .ventana__cuerpo { display: grid; gap: .5em; }
.k-casillas { display: grid; grid-template-columns: auto 1fr auto; gap: .3em .7em; font-size: .8em; color: #535E73; align-items: baseline; }
.k-casillas em { font: 500 .9em/1 var(--f-dato); font-style: normal; color: #7E6420; }
.k-casillas b { font: 500 1.05em/1 var(--f-dato); color: #15223A; text-align: right; }
.k-casillas .k-total { color: #15223A; font-weight: 600; }
.k-casillas .k-total + b { font-size: 1.35em; }
.k-boton { display: flex; justify-content: center; padding: .6em; border-radius: .6em; background: #15223A; color: #F6F1E6; font-weight: 600; font-size: .86em; transition: background-color .3s; }
.k-boton.pulsado { background: #C9A84C; color: #15223A; }
.k-despues, .k-boton.pulsado .k-antes { display: none; }
.k-boton.pulsado .k-despues { display: inline; }
.k-boton.pulsado .k-despues::before { content: "✓ "; }

.k-explicada { right: 2%; top: 37%; z-index: 4; }

@container (max-width: 440px) {
  .t-consultorias .escena-viva__caja { aspect-ratio: 1 / 1.6; font-size: 3.2cqw; }
  .k-buzones { width: 64%; }
  .k-noti { width: 72%; top: 33%; }
  .k-modelo { width: 80%; }
  .k-explicada { top: 59%; }
}

/* Las llaves: del despacho y de cada cliente */
.llaves { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: stretch; }
.llaves__grupo { display: grid; align-content: start; gap: 10px; padding: 24px; border-radius: var(--r); background: var(--papel); border: 1px solid var(--linea); }
.llaves__grupo h3 { font-size: calc(22px * var(--t-escala)); margin-bottom: 6px; }
.llaves__grupo li { display: grid; gap: 2px; padding: 12px 0 12px 30px; border-top: 1px solid var(--linea); position: relative; font-size: 15.5px; color: var(--tinta); }
.llaves__grupo li::before { content: ""; position: absolute; left: 0; top: 15px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--dorado); box-shadow: inset 0 0 0 3px var(--papel), inset 0 0 0 9px var(--dorado); }
.llaves__grupo li small { color: var(--tinta-2); font-size: 14px; }
.llaves__cifra { display: grid; align-content: center; gap: 10px; min-width: 230px; padding: 24px; border-radius: var(--r); background: var(--puerta); color: var(--sobre-puerta); }
.llaves__cifra b { font: 700 13px/1 "Space Grotesk", sans-serif; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.llaves__cifra li { display: flex; gap: 10px; font-size: 15px; }
.llaves__cifra li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: #3ECF8E; }
@media (max-width: 960px) { .llaves { grid-template-columns: 1fr; } }