/* =====================================================================
   [C-09] 04 · PORTAL DE CLIENTES — tabla con la columna Cliente resaltada
   (Mobbin Vanta / Sequence), filas en cascada y palomitas que se dibujan.
   ===================================================================== */
.compare .container { padding: 108px 0 101px; }
.compare__label { margin-left: 183px; }
.compare__title { margin-left: 183px; margin-top: 18px; }
.cmp { margin: 39px 183px 0; width: calc(100% - 366px); border-collapse: collapse; font-size: 21px; letter-spacing: -0.008em; }
.cmp th { height: 74px; padding: 0; font-weight: 400; vertical-align: middle; }
.cmp th span { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-3); letter-spacing: .02em; text-align: center; }
.cmp td { height: 63px; padding: 0; border-top: 1px solid var(--rule); color: var(--ink); transition: background-color .2s ease; }
.cmp tr > :first-child { text-align: left; }
/* Columnas de iconos simétricas: sin relleno lateral, contenido centrado en toda la celda (y en la franja resaltada) */
.cmp tr > :not(:first-child) { width: 142px; padding: 0; text-align: center; vertical-align: middle; }
.cmp th img, .cmp th svg { margin: 0 auto; display: block; }
.cmp tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
/* Columna "Cliente" resaltada */
.cmp th:nth-child(2), .cmp td:nth-child(2) { background: rgba(227, 241, 252, .6); }
.cmp tbody tr:hover td { background: var(--s0); }
.cmp tbody tr:hover td:nth-child(2) { background: rgba(227, 241, 252, .95); }
.cmp__note { margin: 22px 183px 0; font-size: 15px; color: var(--ink-3); }

/* Palomitas: trazo que se dibuja al entrar la fila */
.ck { width: 22px; height: 22px; display: inline-block; vertical-align: middle; overflow: visible; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ck--yes { stroke: var(--ok); }
.ck--no { stroke: var(--no); }
.ck--yes path { stroke-dasharray: 26; stroke-dashoffset: 26; }
.ck--no path { stroke-dasharray: 44; stroke-dashoffset: 44; }
.ck--warn .tri { fill: #b89b3a; stroke: none; }
.ck--warn .bar { stroke: #fff; }
.ck--warn .dot { fill: #fff; stroke: none; }
html.js tr.is-in .ck--yes path, html.js tr.is-in .ck--no path { animation: draw .55s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--d, 0s) + .25s); }
html:not(.js) .ck path { stroke-dashoffset: 0; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ck path { stroke-dashoffset: 0 !important; animation: none !important; } }

@media (max-width: 1719px) {
  .compare__label, .compare__title { margin-left: 11%; }
  .cmp { margin-left: 11%; width: 78%; }
  .cmp__note { margin-left: 11%; }
}
@media (max-width: 1100px) {
  .compare__label, .compare__title, .cmp, .cmp__note { margin-left: 20px; margin-right: 20px; max-width: none; width: auto; }
  .cmp { font-size: 17px; }
  .cmp tr > :not(:first-child) { width: 60px; padding: 0; }
}