/* =========================================================
   Acuaria — Comparison table
   ========================================================= */

.comparison {
    padding: var(--section-padding-y) 0;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

.comparison::before {
    content: '';
    position: absolute;
    top: 30%;
    left: -15%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(27, 184, 160, 0.05), transparent 70%);
    pointer-events: none;
}

.comparison__wrap {
    max-width: 1000px;
    margin: 0 auto;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg), 0 0 60px rgba(27, 184, 160, 0.08);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    position: relative;
}

.comparison__table {
    width: 100%;
    border-collapse: collapse;
}

.comparison__table thead {
    background: linear-gradient(180deg, #F9FCFB, #F2F8F6);
}

.comparison__table thead th {
    padding: var(--space-6) var(--space-4);
    text-align: left;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-navy-deep);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--color-border-light);
}

.comparison__th-feature {
    width: 50%;
}

.comparison__th-acuaria,
.comparison__th-other {
    text-align: center !important;
    width: 25%;
}

.comparison__th-acuaria {
    background: linear-gradient(180deg, rgba(27, 184, 160, 0.12), rgba(27, 184, 160, 0.05));
    color: var(--color-teal) !important;
    border-left: 1px solid rgba(27, 184, 160, 0.2);
    border-right: 1px solid rgba(27, 184, 160, 0.2);
}

.comparison__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--font-weight-extrabold);
    font-size: var(--font-size-body);
    text-transform: none;
    letter-spacing: var(--letter-spacing-normal);
}

.comparison__brand-icon {
    flex-shrink: 0;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(27, 184, 160, 0.35));
}

.comparison__row {
    border-bottom: 1px solid var(--color-border-light);
    transition: background var(--transition-fast);
}

.comparison__row:last-child {
    border-bottom: none;
}

.comparison__row:hover {
    background: rgba(27, 184, 160, 0.03);
}

.comparison__row th {
    padding: var(--space-5) var(--space-6);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-navy-deep);
}

.comparison__feature {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-navy-deep);
}

.comparison__featureSub {
    display: block;
    margin-top: var(--space-1);
    margin-left: calc(18px + var(--space-3));
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-regular);
}

.comparison__row:not(.comparison__row--hero) .comparison__featureSub {
    margin-left: 0;
}

.comparison__cell {
    padding: var(--space-5) var(--space-4);
    text-align: center;
    vertical-align: middle;
}

.comparison__cell--yes {
    background: rgba(27, 184, 160, 0.05);
    border-left: 1px solid rgba(27, 184, 160, 0.2);
    border-right: 1px solid rgba(27, 184, 160, 0.2);
}

.comparison__icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.comparison__icon--yes {
    background: var(--gradient-teal);
    color: var(--color-white);
    box-shadow: 0 6px 20px rgba(27, 184, 160, 0.35);
}

.comparison__icon--no {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-red);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.comparison__icon--partial {
    background: rgba(234, 179, 8, 0.1);
    color: var(--color-gold);
    border: 1px solid rgba(234, 179, 8, 0.3);
    font-weight: var(--font-weight-bold);
    font-size: 1.25rem;
    line-height: 1;
}

.comparison__note {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

.comparison__row--hero {
    background: linear-gradient(90deg, rgba(27, 184, 160, 0.08), rgba(72, 217, 196, 0.04));
}

.comparison__row--hero th {
    position: relative;
}

.comparison__row--hero th::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gradient-teal);
}