/* ClickaCierre — pieza cerrada «Cómo comprobamos que cada consulta se cuenta» (biblioteca de la plantilla #7, pilar
   Analítica web y reportes). La carga la página con p.estilos, después de landing.css. Es un <details class="matrix comp">
   dentro de «Cómo trabajamos»: reutiliza lo de la tabla comparativa (.matrix: el marcado, la tabla, el borde, el
   chevrón que gira) y suma lo propio, con el prefijo .comp-. La banda es oscura (isla): los tokens ya son los oscuros.
   Todo su texto está en el HTML y se lee sin JS. En el celular las tablas se apilan como tarjetas: cada celda lleva su
   columna (data-th) y no hay desborde horizontal. */

.matrix.comp{margin-top:clamp(44px,6vw,72px)}

/* ---------- cerrada: el título, la frase que cuenta qué hay dentro y el chevrón. Todo el bloque es el botón */
.matrix.comp>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 22px;padding:20px 22px;border:1px solid var(--hair);border-radius:20px;background:rgba(var(--paper-rgb),.04);font-size:15.5px;line-height:1.5;color:var(--soft);cursor:pointer;list-style:none;transition:border-color .2s,background .2s,translate .25s var(--ease)}
.matrix.comp>summary::-webkit-details-marker{display:none}
.comp-head{display:grid;gap:6px;min-width:0}
.comp-h{margin:0;font:650 clamp(19px,2.6vw,25px)/1.2 var(--display);letter-spacing:-.01em;color:var(--paper)}
.comp-res{max-width:68ch}
.comp-chev{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid var(--hair);border-radius:50%;font-size:17px;color:var(--paper);transition:background .2s,border-color .2s,color .2s,scale .25s var(--ease)}
.matrix.comp>summary .i{transition:rotate .3s var(--ease)}

/* al pasar el cursor (o con el foco del teclado) se enciende en lima: el borde, un velo y el chevrón */
.matrix.comp>summary:hover,.matrix.comp>summary:focus-visible{border-color:var(--acc);background:rgba(var(--acc-rgb),.1);translate:0 -2px}
.matrix.comp>summary:hover .comp-chev,.matrix.comp>summary:focus-visible .comp-chev{border-color:var(--acc);background:var(--acc);color:var(--on-lime);scale:1.06}
.matrix.comp[open]>summary{border-color:var(--lime-edge);background:rgba(var(--acc-rgb),.07)}
.matrix.comp>summary:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
/* el foco que sigue al cursor (.spot) pasa por dentro del botón, no lo recorta */
.matrix.comp>summary.spot:before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(var(--acc-rgb),.16),transparent 60%)}

/* ---------- abierta: tres partes, la primera y la segunda en tablas y la tercera en tres notas */
.comp-body{display:grid;gap:clamp(26px,4vw,40px);margin-top:16px;padding:clamp(18px,3vw,32px);border:1px solid var(--line);border-radius:20px;background:var(--ink)}
.comp-part h4{margin:0 0 14px;font:400 12.5px/1.35 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.comp .matrix-scroll{margin-top:0;border-radius:14px;background:rgba(var(--paper-rgb),.03)}
.matrix .comp-tb{min-width:0;font-size:15px}
.comp .comp-tb th,.comp .comp-tb td{padding:14px 18px}
.comp .comp-tb thead th{white-space:nowrap}
.comp .comp-tb tbody th{width:22%;font:650 16px/1.35 var(--display);color:var(--paper)}
.comp .comp-tb td{width:39%}
.comp .comp-tb tbody tr{transition:background .2s}
.comp .comp-tb tbody tr:hover{background:rgba(var(--acc-rgb),.07)}

.comp-lim ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.comp-lim li{position:relative;padding:16px 18px 16px 44px;border:1px solid var(--line);border-radius:14px;background:rgba(var(--paper-rgb),.03);font-size:15px;line-height:1.55;color:var(--soft);transition:border-color .2s,background .2s,translate .25s var(--ease)}
.comp-lim li:before{content:'';position:absolute;left:17px;top:22px;width:9px;height:9px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.2)}
.comp-lim li:hover{border-color:var(--acc);background:rgba(var(--acc-rgb),.07);translate:0 -2px}

/* ---------- celular: las tablas se apilan como tarjetas (la columna va sobre cada dato) y no desbordan */
@media (max-width:860px){
  .comp-lim ul{grid-template-columns:1fr}
}
@media (max-width:760px){
  .matrix.comp>summary{grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;padding:16px 16px}
  .comp-chev{width:38px;height:38px;font-size:15px}
  .comp-body{padding:18px 14px}
  .comp .matrix-scroll{overflow:visible;border:0;background:none}
  .comp .comp-tb,.comp .comp-tb tbody,.comp .comp-tb tr,.comp .comp-tb th,.comp .comp-tb td{display:block;width:100%}
  .comp .comp-tb thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .comp .comp-tb tbody tr{margin-bottom:12px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(var(--paper-rgb),.03)}
  .comp .comp-tb tbody tr:last-child{margin-bottom:0}
  .comp .comp-tb th,.comp .comp-tb td{padding:0;border:0}
  .comp .comp-tb tbody th{width:100%;margin-bottom:10px;font-size:17px}
  .comp .comp-tb td{width:100%;margin-top:9px;font-size:15px;line-height:1.5}
  .comp .comp-tb td:before{content:attr(data-th);display:block;margin-bottom:2px;font:400 11.5px/1.35 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
}
@media (prefers-reduced-motion:reduce){
  .matrix.comp>summary,.comp-chev,.matrix.comp>summary .i,.comp-lim li{transition:none}
  .matrix.comp>summary:hover,.matrix.comp>summary:focus-visible,.comp-lim li:hover{translate:none}
}