/* =========================================================
   SITI Negocios · 5. tabla comparativa de planes
   ========================================================= */
.compare{padding:0 0 clamp(90px,14vh,160px)}
.cmp-hint{display:none;align-items:center;justify-content:center;gap:7px;margin-top:16px;font-size:.78rem;font-weight:700;color:var(--muted)}
@media (max-width:1023px){ .cmp-hint{display:flex} }

.cmp-shell{border:1px solid var(--line);border-radius:28px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.cmp-table{width:100%;border-collapse:separate;border-spacing:0;min-width:880px;table-layout:fixed}
.cmp-table th,.cmp-table td{padding:14px 16px;vertical-align:middle}
.cmp-table tbody td{border-bottom:1px solid var(--line)}
.cmp-table thead th{position:relative;border-bottom:1px solid var(--line-2);vertical-align:top;text-align:center;transition:background-color .18s;padding-top:40px;padding-bottom:20px}
/* columnas de plan del mismo ancho; la de funciones un poco más ancha */
.cmp-table thead th:not(.cmp-feat){width:18%}
.cmp-table thead .cmp-feat{width:28%;position:sticky}

.cmp-feat{position:sticky;left:0;z-index:2;background:var(--surface);text-align:left!important;font-weight:600;font-size:.86rem;min-width:230px}
thead .cmp-feat{z-index:4}
.cmp-feat small{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cmp-cell{text-align:center;font-family:var(--f-dis);font-size:.86rem;font-weight:700;white-space:nowrap;transition:background-color .18s}

.cmp-table tbody tr.cmp-row:not(.cmp-group):hover td{background:rgba(var(--hot),.05)}
.cmp-table tbody tr.cmp-row:not(.cmp-group):hover .cmp-feat{background:color-mix(in srgb,var(--orange) 7%,var(--surface))}

.cmp-group td{background:var(--bg-2);border-top:1px solid var(--line)}
.cmp-grouplabel{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
/* al deslizar la tabla en móvil, el título del grupo se queda a la vista */
.cmp-group .cmp-grouplabel{position:sticky;left:16px}
.cmp-grouplabel .lucide{width:15px;height:15px;color:var(--ink)}

.cmp-pro{background:rgba(var(--hot),.06)}
.cmp-table tbody tr.cmp-row:hover .cmp-pro{background:rgba(var(--hot),.12)}
.cmp-th-pro{background:linear-gradient(180deg,rgba(var(--hot),.14),rgba(var(--hot),.03));box-shadow:inset 0 3px 0 var(--orange)}
.cmp-table .col-hi{background:rgba(var(--mesh),.05)}
.cmp-table .cmp-pro.col-hi,.cmp-th-pro.col-hi{background:rgba(var(--hot),.16)}

.cmp-yes,.cmp-no{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%}
.cmp-yes{background:rgba(34,197,94,.15);color:#16a34a}
.cmp-proyes{background:rgba(var(--hot),.18);color:var(--ink)}
.cmp-no{background:rgba(var(--mesh),.05);color:rgba(var(--mesh),.3)}
.cmp-yes .lucide{width:15px;height:15px;stroke-width:3}
.cmp-no .lucide{width:14px;height:14px;stroke-width:3}

.cmp-plan-name{font-family:var(--f-dis);font-weight:800;font-size:1rem;letter-spacing:-.01em}
/* alto fijo: Gratis, $799 y Personalizable quedan en la misma línea y los botones parejos */
.cmp-plan-price{display:flex;align-items:center;justify-content:center;gap:2px;height:34px;margin-top:6px;font-family:var(--f-dis);font-weight:800;font-size:1.3rem;white-space:nowrap}
.cmp-plan-price small{font-size:.66rem;font-weight:600;color:var(--muted)}
.cmp-plan-price--sm{font-size:.95rem}
/* flota sobre el nombre sin empujarlo: Impulsa queda alineada con las demás */
.cmp-badge{position:absolute;top:12px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:3px 9px;border-radius:99px;background:var(--amber);color:#3A2400;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase}

.cmp-cta{display:flex;align-items:center;justify-content:center;width:100%;margin-top:14px;padding:9px 12px;border-radius:12px;font-family:var(--f-dis);font-size:.76rem;font-weight:800;border:1px solid transparent;transition:background-color .25s,color .25s,border-color .25s,transform .2s}
.cmp-cta:active{transform:scale(.96)}
.cmp-cta--ghost{border-color:var(--line-2)}
.cmp-cta--ghost:hover{background:var(--fg);color:var(--bg)}
.cmp-cta--line{border-color:var(--orange);color:var(--ink)}
.cmp-cta--line:hover{background:var(--orange);color:var(--on-orange)}
.cmp-cta--solid{background:var(--orange);color:var(--on-orange);box-shadow:0 8px 20px -8px rgba(var(--hot),.6)}
.cmp-cta--solid:hover{background:var(--fg);color:var(--bg)}
.cmp-row--cta td{border-bottom:none}

/* aparición escalonada: 03-plans.js pone .in fila por fila */
.anim-on .cmp-row .cmp-pop{display:inline-block;opacity:0;transform:translateY(9px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.anim-on .cmp-row.in .cmp-pop{opacity:1;transform:none}

@media (max-width:620px){
  /* la columna fija deja ver al menos un plan al lado */
  .cmp-feat{min-width:0;white-space:normal;font-size:.78rem;padding-inline:12px}
  .cmp-table thead .cmp-feat{width:140px}
  .cmp-table thead th:not(.cmp-feat){width:155px}
  .cmp-table{min-width:760px}
  .cmp-table th,.cmp-table td{padding:12px 10px}
}