.comp-hero { padding:60px 48px 50px; border-bottom:var(--border); background:radial-gradient(circle at 80% 50%,rgba(255,77,28,.06) 0%,transparent 50%); }
.comp-hero-inner { max-width:600px; }
.comp-hero-inner h1 { font-family:'Syne',sans-serif; font-size:clamp(2rem,5vw,3.5rem); font-weight:800; letter-spacing:-2px; line-height:1.05; margin-bottom:12px; }
.comp-hero-inner h1 em { font-style:italic; color:var(--accent); }
.comp-hero-inner p { font-size:.95rem; color:#666; line-height:1.6; }

/* SELECTORES */
.comp-selectores { padding:36px 48px; border-bottom:var(--border); display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; background:var(--white); }
.comp-select-wrap { display:flex; gap:12px; flex-wrap:wrap; flex:1; }
.comp-select-group { display:flex; flex-direction:column; gap:6px; min-width:180px; flex:1; }
.comp-select-group label { font-size:.72rem; text-transform:uppercase; letter-spacing:1.5px; font-weight:600; color:var(--muted); }
.comp-select-group select {
  border:var(--border); border-radius:10px; padding:11px 14px;
  font-family:'Inter',sans-serif; font-size:.88rem;
  background:var(--bg); color:var(--ink); outline:none; cursor:pointer;
}
.comp-btn {
  background:var(--accent); color:#fff; border:2px solid var(--ink);
  border-radius:12px; padding:13px 28px; font-size:.9rem; font-weight:700;
  font-family:'Inter',sans-serif; cursor:pointer;
  box-shadow:3px 3px 0 var(--ink); transition:all .15s; white-space:nowrap;
}
.comp-btn:hover { transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }

/* POPULARES */
.comp-rapidas { padding:16px 48px; border-bottom:var(--border); display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--soft); }
.cr-label { font-size:.75rem; font-weight:600; color:var(--muted); white-space:nowrap; }
.cr-pill { background:var(--white); border:var(--border); border-radius:100px; padding:6px 14px; font-size:.78rem; font-weight:500; cursor:pointer; transition:all .15s; font-family:'Inter',sans-serif; color:var(--ink); }
.cr-pill:hover { background:var(--ink); color:var(--bg); border-color:var(--ink); }

/* RESULTADO */
.comp-resultado { padding:48px; }
.comp-resultado.hidden { display:none; }

.comp-table-wrap { overflow-x:auto; }
.comp-table { width:100%; border-collapse:collapse; border:var(--border); border-radius:16px; overflow:hidden; }

/* CABECERA */
.comp-table thead tr { background:var(--ink); color:var(--bg); }
.comp-table th { padding:20px 24px; text-align:left; font-family:'Syne',sans-serif; font-weight:700; font-size:.95rem; }
.comp-table th:first-child { width:160px; background:var(--soft); color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:1px; }

.th-tool { display:flex; align-items:center; gap:12px; }
.th-icon { font-size:1.4rem; }
.th-name { font-size:1rem; }
.th-badge { font-size:.65rem; font-weight:600; padding:3px 8px; border-radius:100px; border:1.5px solid rgba(255,255,255,.3); color:rgba(255,255,255,.7); }

/* FILAS */
.comp-table tbody tr { border-bottom:1px solid rgba(26,26,26,.07); }
.comp-table tbody tr:last-child { border-bottom:none; }
.comp-table tbody tr:hover { background:rgba(26,26,26,.02); }
.comp-table td { padding:16px 24px; vertical-align:top; font-size:.87rem; line-height:1.6; }
.comp-table td:first-child { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--muted); background:var(--soft); white-space:nowrap; }

/* CELDAS ESPECIALES */
.td-precio { font-weight:700; }
.td-stars { display:flex; gap:2px; font-size:1rem; }
.td-list { display:flex; flex-direction:column; gap:4px; }
.td-list-item { display:flex; align-items:flex-start; gap:6px; font-size:.83rem; }
.td-list-item.pro::before { content:'✓'; color:#22c55e; font-weight:700; flex-shrink:0; }
.td-list-item.contra::before { content:'✗'; color:#ef4444; font-weight:700; flex-shrink:0; }
.td-winner { background:rgba(255,77,28,.06); }
.winner-badge { font-size:.65rem; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }

/* VEREDICTO */
.comp-veredicto { margin-top:28px; background:var(--ink); color:var(--bg); border-radius:16px; padding:32px 36px; }
.cv-title { font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:800; margin-bottom:20px; }
.cv-cards { display:flex; gap:16px; flex-wrap:wrap; }
.cv-card { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:16px 20px; flex:1; min-width:180px; }
.cv-card-title { font-size:.7rem; text-transform:uppercase; letter-spacing:1px; color:rgba(245,242,235,.4); margin-bottom:6px; font-weight:600; }
.cv-card-tool { font-family:'Syne',sans-serif; font-size:1rem; font-weight:800; color:var(--accent); margin-bottom:4px; }
.cv-card-why { font-size:.78rem; color:rgba(245,242,235,.55); line-height:1.5; }

.comp-actions { display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
.comp-action-btn { background:transparent; border:1.5px solid rgba(255,255,255,.2); border-radius:10px; padding:10px 18px; font-size:.82rem; font-weight:600; font-family:'Inter',sans-serif; cursor:pointer; color:rgba(245,242,235,.7); transition:all .15s; }
.comp-action-btn:hover { background:rgba(255,255,255,.1); color:#fff; }
.comp-action-btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }

@media (max-width:700px) {
  .comp-hero { padding:40px 20px; }
  .comp-selectores { padding:24px 20px; }
  .comp-rapidas { padding:14px 20px; }
  .comp-resultado { padding:24px 20px; }
  .comp-veredicto { padding:24px 20px; }
}