/* ===========================================================================
   comparativa.css — PresuCosto frente a las alternativas
   Alineada con el sistema del sitio: navy + dorado + reticula de plano, las
   mismas piezas de la portada (marcas de registro, linea de cota, cajetin).
   Antes esta pagina era un HTML aparte con su propio header, sus fuentes de
   Google (Fraunces/Archivo) y una paleta crema/mostaza: no parecia PresuCosto.
   Tampoco redefine variables en :root (lo anterior si lo hacia).
   =========================================================================== */

.cmp {
  --cmp-navy: #112f53;
  --cmp-navy-800: #0b2140;
  --cmp-oro: #d4af37;
  --cmp-oro-claro: #e7c65a;
  /* .seccion-Principal del layout es flex con align-items:center — sin esto la
     pagina NO se estira: toma el ancho de su contenido (la tabla mide 780px de
     minimo) y se sale de la pantalla. */
  width: 100%;
  min-width: 0;
  color: var(--gray-800);
  font-family: var(--font-family-base);
  background: var(--bg-light);
}

.cmp a { text-decoration: none; }

/* ---------- Botones (los del sistema) ---------- */
.cmp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 50px;
  font-family: var(--font-family-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast), transform var(--transition-fast),
              box-shadow var(--transition-fast);
}
.cmp-btn--lg { padding: 16px 34px; font-size: 16px; }

.cmp-btn--primary {
  background: linear-gradient(135deg, var(--accent-success) 0%, var(--accent-success-dark) 100%);
  color: #fff;
  box-shadow: 0 8px 26px rgba(39, 174, 96, 0.34);
}
.cmp-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(39, 174, 96, 0.42);
}

.cmp-btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.92);
}
.cmp-btn--ghost:hover {
  background: rgba(212, 175, 55, 0.14);
  border-color: rgba(212, 175, 55, 0.6);
  color: #fff;
}

/* ===========================================================================
   HERO — la misma lamina de plano de la portada
   =========================================================================== */
.cmp-hero {
  position: relative;
  padding: 88px 6vw 96px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(120% 90% at 88% 6%, rgba(212, 175, 55, 0.10) 0%, transparent 55%),
    radial-gradient(90% 80% at 6% 96%, rgba(52, 152, 219, 0.14) 0%, transparent 58%),
    linear-gradient(155deg, #0b2140 0%, #112f53 55%, #164a86 100%);
  overflow: hidden;
}
/* Reticula: misma cadencia (52px) que la portada y la seccion de novedades. */
.cmp-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
}
.cmp-hero > * { position: relative; z-index: 1; }

/* Marcas de registro: las esquinas de la lamina. */
.cmp-marca {
  position: absolute;
  width: 26px; height: 26px;
  border: 1px solid rgba(212, 175, 55, 0.55);
  z-index: 1;
  pointer-events: none;
}
.cmp-marca--tl { top: 26px; left: 26px; border-right: 0; border-bottom: 0; }
.cmp-marca--tr { top: 26px; right: 26px; border-left: 0; border-bottom: 0; }

.cmp-kicker {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(212, 175, 55, 0.92);
  margin: 0 0 20px;
}

.cmp-hero__title {
  font-family: var(--font-family-heading);
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -1.2px;
  color: #fff;
  margin: 0 0 20px;
  text-wrap: balance;
}
/* El dorado cierra la promesa (igual que en la portada). */
.cmp-hero__title em {
  font-style: normal;
  color: var(--cmp-oro-claro);
}

.cmp-hero__lead {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(226, 236, 248, 0.86);
  max-width: 62ch;
  margin: 0 auto 32px;
}
.cmp-hero__lead strong { color: #fff; font-weight: 700; }

.cmp-hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 52px;
}

/* ---------- El duelo de precios: dos celdas de cajetin ---------- */
.cmp-price {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  max-width: 660px;
  margin: 0 auto;
  border: 1px solid rgba(212, 175, 55, 0.32);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
}

.cmp-price__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 22px;
}
/* La celda ganadora se distingue con el dorado, no con otro color inventado. */
.cmp-price__col--win {
  background: rgba(212, 175, 55, 0.10);
  box-shadow: inset 0 3px 0 var(--cmp-oro);
  border-radius: 13px 0 0 13px;
}

.cmp-price__tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(226, 236, 248, 0.62);
}
.cmp-price__num {
  font-family: var(--font-family-heading);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--cmp-oro-claro);
  line-height: 1.1;
}
.cmp-price__num--usd { color: rgba(236, 112, 99, 0.95); }
.cmp-price__unit { font-size: 12.5px; color: rgba(226, 236, 248, 0.6); }

.cmp-price__vs {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-family: var(--font-family-heading);
  font-size: 13px;
  font-style: italic;
  color: rgba(226, 236, 248, 0.45);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.cmp-price__badge {
  position: absolute;
  top: -13px;
  right: 18px;
  background: var(--cmp-oro);
  color: var(--cmp-navy-800);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
}

/* ===========================================================================
   SECCIONES CLARAS
   =========================================================================== */
.cmp-section {
  position: relative;
  padding: 78px 6vw;
  background: var(--bg-white);
  text-align: center;
}
.cmp-section--table { background: var(--bg-light); }

/* Linea de cota entre secciones: el hilo conductor del sitio. */
.cmp-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 74%);
  height: 9px;
  background:
    linear-gradient(rgba(212, 175, 55, 0.55) 0 0) left top / 1px 9px no-repeat,
    linear-gradient(rgba(212, 175, 55, 0.55) 0 0) right top / 1px 9px no-repeat,
    linear-gradient(rgba(212, 175, 55, 0.35) 0 0) center center / 100% 1px no-repeat;
  pointer-events: none;
}

.cmp-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-info-dark);
  margin: 0 0 12px;
}

.cmp-h2 {
  font-family: var(--font-family-heading);
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--cmp-navy);
  margin: 0 0 44px;
  text-wrap: balance;
}

/* ---------- Pilares (el ciclo de la obra) ---------- */
.cmp-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
  text-align: left;
}

.cmp-pillar {
  padding: 26px 22px 24px;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-top: 2px solid transparent;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(17, 47, 83, 0.05);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal),
              border-top-color var(--transition-normal);
}
.cmp-pillar:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(17, 47, 83, 0.14);
  border-top-color: var(--cmp-oro);
}

/* La numeracion es real: son las 4 etapas del ciclo, en orden. */
.cmp-pillar__n {
  display: block;
  font-family: var(--font-family-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--cmp-oro);
  margin-bottom: 12px;
}
.cmp-pillar h3 {
  font-family: var(--font-family-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--cmp-navy);
  margin: 0 0 8px;
}
.cmp-pillar p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

/* ===========================================================================
   TABLA — una lamina de datos: cabecera navy, hairlines, nuestra columna en oro
   =========================================================================== */
.cmp-table-wrap {
  max-width: min(1120px, 100%);
  margin: 0 auto;
  /* Si no cabe, scrollea la TABLA — nunca la pagina. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  border: 1px solid var(--border-light);
  background: var(--bg-white);
  box-shadow: 0 2px 14px rgba(17, 47, 83, 0.06);
}

.cmp-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  text-align: left;
  font-size: 13.5px;
}

.cmp-table thead th {
  background: var(--cmp-navy);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-family-heading);
  font-size: 14px;
  font-weight: 700;
  padding: 18px 18px 16px;
  vertical-align: bottom;
  border-bottom: 2px solid rgba(212, 175, 55, 0.5);
}
.cmp-table thead th.cmp-table__feat { background: var(--cmp-navy-800); }

/* Nuestra columna: coronada en oro. */
.cmp-table thead th.cmp-table__win {
  background: linear-gradient(180deg, #163c69 0%, #112f53 100%);
  box-shadow: inset 0 3px 0 var(--cmp-oro);
}
.cmp-table__brand {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: var(--cmp-oro-claro);
  letter-spacing: -0.01em;
}
.cmp-table__sub {
  display: block;
  margin-top: 4px;
  font-family: var(--font-family-base);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.cmp-table tbody th {
  font-weight: 600;
  color: var(--cmp-navy);
  padding: 14px 18px;
  background: var(--bg-light);
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}

.cmp-table tbody td {
  padding: 14px 18px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}
.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td { border-bottom: none; }

/* La columna de PresuCosto, resaltada de punta a punta. */
.cmp-table td.cmp-table__win {
  background: rgba(212, 175, 55, 0.07);
  color: var(--gray-800);
  font-weight: 500;
}

.cmp-ico { font-weight: 700; }
.cmp-ico--yes { color: var(--accent-success); }
.cmp-ico--no { color: var(--accent-danger-light); }
.cmp-yes { color: var(--accent-success-dark); font-weight: 700; }
.cmp-usd { color: var(--accent-danger); font-weight: 700; }
.cmp-mut { color: var(--gray-500); }

.cmp-note {
  max-width: 860px;
  margin: 22px auto 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--gray-500);
  text-align: center;
}
.cmp-note strong { color: var(--gray-700); }

/* ===========================================================================
   CTA FINAL
   =========================================================================== */
.cmp-final {
  position: relative;
  padding: 84px 6vw 92px;
  text-align: center;
  color: #fff;
  background: linear-gradient(160deg, var(--cmp-navy-800) 0%, #1e3a52 100%);
  overflow: hidden;
}
.cmp-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
}
.cmp-final > * { position: relative; z-index: 1; }

.cmp-final__title {
  font-family: var(--font-family-heading);
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--cmp-oro-claro);
  margin: 0 0 14px;
  text-wrap: balance;
}
.cmp-final__lead {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(226, 236, 248, 0.8);
  max-width: 56ch;
  margin: 0 auto 30px;
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1024px) {
  .cmp-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .cmp-hero { padding: 60px 20px 68px; }
  .cmp-marca { display: none; }
  .cmp-hero__cta { margin-bottom: 40px; }

  .cmp-price { grid-template-columns: minmax(0, 1fr); max-width: 340px; }
  .cmp-price__col--win { border-radius: 13px 13px 0 0; }
  .cmp-price__vs {
    border-left: 0; border-right: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    justify-content: center;
    padding: 6px 0;
  }
  .cmp-price__badge { right: 50%; transform: translateX(50%); }

  .cmp-section { padding: 56px 20px; }
  .cmp-pillars { grid-template-columns: minmax(0, 1fr); }
  .cmp-final { padding: 60px 20px 68px; }
}