/* ============================================================
   services.css — Estilos específicos de Servicios
   ============================================================ */

/* ========================
   TABLA COMPARATIVA
   ======================== */

.comparison-section {
  padding-block: var(--section-padding);
  background-color: var(--color-surface);
}

.comparison-section__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Vista desktop — tabla estándar */
.comparison-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.comparison-table th,
.comparison-table td {
  padding: var(--space-4) var(--space-6);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.comparison-table th {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  background-color: var(--color-surface-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Encabezado columna webiapro destacado */
.comparison-table th.col-webiapro {
  color: var(--color-accent);
  background-color: rgba(99,102,241,.15);
}

.comparison-table td.col-webiapro {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  background-color: rgba(99,102,241,.06);
}

.comparison-table tr:last-child td { border-bottom: none; }

.comparison-table tr:hover td {
  background-color: rgba(255,255,255,.02);
}

.comparison-table tr:hover td.col-webiapro {
  background-color: rgba(99,102,241,.1);
}

.comparison-table td:first-child {
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
}

/* Nota de tabla */
.comparison-note {
  text-align: right;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

/* Vista mobile — cards verticales */
.comparison-cards {
  display: none;
  flex-direction: column;
  gap: var(--space-4);
}

.comparison-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.comparison-card__header {
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
}

.comparison-card__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--color-border-light);
}

.comparison-card__row:last-child { border-bottom: none; }

.comparison-card__cell {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.comparison-card__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.comparison-card__cell.webiapro {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  background-color: rgba(99,102,241,.06);
}

/* Switch desktop/mobile */
@media (max-width: 767px) {
  .comparison-table-wrapper { display: none; }
  .comparison-cards { display: flex; }
}

/* ========================
   BASE WEB — CAJA DESTACADA
   ======================== */

.base-box {
  background: linear-gradient(135deg, var(--color-surface), var(--color-primary-light));
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-xl);
  padding: var(--space-12);
  position: relative;
  overflow: hidden;
}

.base-box::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(99,102,241,.1) 0%, transparent 70%);
  pointer-events: none;
}

.base-box__badge {
  display: inline-block;
  margin-bottom: var(--space-4);
}

.base-box__name {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
}

.base-box__price {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--space-4);
}

.base-box__desc {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
  max-width: 480px;
}

.base-box__includes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.base-box__include-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.base-box__include-item::before {
  content: '✓';
  color: var(--color-accent);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .base-box { padding: var(--space-8); }
  .base-box__includes { grid-template-columns: 1fr; }
}

/* ========================
   MÓDULOS — GRID
   ======================== */

.modules-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* ========================
   PROYECTOS TIPO
   ======================== */

.typical-projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
}

@media (max-width: 1024px) {
  .typical-projects { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .typical-projects { grid-template-columns: 1fr; }
}