/* =========================================================
   Planes — estilos de tabla y cards (ligeros, accesibles)
   ========================================================= */

/* Base */
html, body {
    background: #fff;
    color: #0C0C0C;
  }
  
  /* ---------- Cards de planes (arriba) ---------- */
  .shadow-card {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
  }
  
  a[data-ab^="cta_plan_"] {
    transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  }
  a[data-ab^="cta_plan_"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 117, 255, 0.15);
  }
  a[data-ab^="cta_plan_"]:focus-visible {
    outline: 2px solid #0075FF;
    outline-offset: 2px;
    border-radius: 9999px;
  }
  
  /* ---------- Tabla comparativa ---------- */
  .compareTable th,
  .compareTable td {
    border-bottom: 1px solid rgba(12, 12, 12, 0.07);
  }
  
  #compareTbody td:nth-child(n + 2) {
    /* columnas de planes centradas (Básico, Pro, Diamond) */
    text-align: center;
    vertical-align: middle;
  }
  
  /* Zebra rows para mejorar lectura */
  .rowAlt:nth-child(odd) {
    background: rgba(12, 12, 12, 0.02);
  }
  
  /* Íconos (usa el sprite SVG incluido en el HTML) */
  #compareTbody svg {
    display: block;
  }
  #compareTbody td .icon-check,
  #compareTbody td svg use[href="#icon-check"] {
    color: #0C0C0C;
  }
  #compareTbody td .icon-minus,
  #compareTbody td svg use[href="#icon-minus"] {
    color: rgba(12, 12, 12, 0.4);
  }
  
  /* ---------- Columna Pro destacada ---------- */
  /* Header Pro con fondo sutil y borde inferior reforzado */
  .proColHead {
    background: linear-gradient(0deg, rgba(0,117,255,0.06), rgba(0,117,255,0.06)), #F3F4F6;
    border-bottom: 2px solid rgba(0,117,255,0.25) !important;
  }
  
  /* Celdas Pro (3.ª columna del tbody) */
  .compareTable tbody tr td:nth-child(3) {
    background: rgba(0,117,255,0.04);
  }
  
  /* En hover de fila, sube un poco el contraste sin ser invasivo */
  .compareTable tbody tr:hover td {
    background-color: rgba(12, 12, 12, 0.03);
  }
  .compareTable tbody tr:hover td:nth-child(3) {
    background-color: rgba(0,117,255,0.06);
  }
  
  /* ---------- Responsive ---------- */
  @media (max-width: 640px) {
    .compareTable th,
    .compareTable td {
      padding-left: 12px;
      padding-right: 12px;
    }
  
    /* Cards: asegurar separación suficiente */
    .shadow-card {
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    }
  }
  
  /* ---------- Accesibilidad ---------- */
  .compareTable th {
    font-weight: 600;
  }
  .compareTable thead {
    font-size: 0.95rem;
  }
  
  /* ---------- Utilidades menores ---------- */
  /* Suaviza el borde del contenedor de la tabla para tapar bordes internos */
  #comparativa > div {
    backdrop-filter: saturate(1.1);
    overflow: auto;
    border-radius: 1rem;
  }