.comparativa-section {
background: var(--color-text);
padding: 6rem 2rem;
position: relative;
overflow: hidden;
@media (max-width: 768px) {
padding: 4rem 1.5rem;
}
}
.comparativa-container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
} .comparativa-header {
margin-bottom: 4rem;
text-align: center;
@media (max-width: 768px) {
margin-bottom: 3rem;
}
}
.comparativa-label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-primary-light);
margin-bottom: 1rem;
&::before {
content: '';
width: 24px;
height: 2px;
background: var(--color-primary-light);
}
}
.comparativa-title {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: var(--font-weight-extrabold);
color: var(--color-white);
letter-spacing: var(--letter-spacing-tight);
line-height: var(--line-height-tight);
} .comparativa-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--radius-lg);
}
.comparativa-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 0.95rem;
min-width: 700px;
}
.comparativa-table thead th {
padding: 1.5rem 1.25rem;
font-size: 0.9rem;
font-weight: var(--font-weight-bold);
color: rgba(255, 255, 255, 0.5);
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
vertical-align: bottom;
line-height: 1.3;
}
.comparativa-table thead th.comp-feature-col {
text-align: left;
width: 28%;
}
.comparativa-table thead th.comp-col--highlight {
color: var(--color-white);
background: rgba(166, 93, 87, 0.15);
border-radius: var(--radius-md) var(--radius-md) 0 0;
position: relative;
}
.comp-recommended {
display: block;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-primary-light);
margin-bottom: 0.5rem;
}
.comparativa-table tbody td {
padding: 1.15rem 1.25rem;
text-align: center;
color: rgba(255, 255, 255, 0.7);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
vertical-align: middle;
}
.comparativa-table tbody td.comp-feature-name {
text-align: left;
font-weight: var(--font-weight-medium);
color: rgba(255, 255, 255, 0.8);
}
.comparativa-table tbody td.comp-col--highlight {
background: rgba(166, 93, 87, 0.08);
}
.comparativa-table tbody tr:last-child td.comp-col--highlight {
border-radius: 0 0 var(--radius-md) var(--radius-md);
} .comp-yes {
color: #6BBF6B;
font-size: 22px;
}
.comp-no {
color: rgba(255, 255, 255, 0.2);
font-size: 22px;
}
.comp-partial {
font-size: 0.8rem;
font-weight: var(--font-weight-medium);
color: rgba(255, 255, 255, 0.45);
}
.comp-text {
font-size: 0.85rem;
font-weight: var(--font-weight-semibold);
color: rgba(255, 255, 255, 0.7);
} .comparativa-table tbody tr:last-child td.comp-col--highlight .comp-text {
color: var(--color-primary-light);
font-weight: var(--font-weight-bold);
} .comparativa-note {
text-align: center;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.35);
margin-top: 1.5rem;
font-style: italic;
} @media (max-width: 768px) {
.comparativa-table {
font-size: 0.85rem;
}
.comparativa-table thead th,
.comparativa-table tbody td {
padding: 1rem 0.75rem;
}
}