/* ===== HOME — ¿Por qué elegirnos? ===== */
.cj-why-wrap{
  max-width:1200px; margin:28px auto; padding:0 14px;
}
.cj-why-head h2{
  margin:0 0 14px 0;
  color:#002041; font-weight:900; text-transform:uppercase; letter-spacing:.6px;
  font-size:clamp(22px, 5vw, 32px); line-height:1.1;
}

/* Cards grid */
.cj-why-cards{
  display:grid; gap:12px;
  grid-template-columns: 1fr;
}
@media (min-width:720px){
  .cj-why-cards{ grid-template-columns: repeat(6, 1fr); grid-auto-flow:dense; }
  /* 4 cards con tamaños distintos (horizontales) */
  .cj-why-card-0{ grid-column: span 3; }
  .cj-why-card-1{ grid-column: span 3; }
  .cj-why-card-2{ grid-column: span 4; }
  .cj-why-card-3{ grid-column: span 2; }
}
.cj-why-card{
  background:#F5F7FA; border-radius:14px; padding:16px 18px;
  display:flex; flex-direction:column; gap:6px;
  min-height:120px;
}
.cj-why-card h3{
  margin:0; color:#0F2D4C; font-weight:800; font-size:clamp(15px, 2.2vw, 18px);
}
.cj-why-card p{
  margin:0; color:#23344a; font-size:14px; line-height:1.4;
}

/* Comparativa “tipo tabla” sin <table> */
.cj-why-compare{
  margin-top:16px;
  background:#FBFBFB; border-radius:14px; padding:12px;
  display:grid; gap:8px;
}
.cj-why-row{
  display:grid; grid-template-columns: 1.1fr .9fr 1fr; gap:8px;
  align-items:center;
  padding:10px 10px;
  border-radius:10px;
}
.cj-why-row--head{
  background:#EFF3F7; font-weight:800; color:#0F2D4C;
}
.cj-why-row:not(.cj-why-row--head){
  background:#FFFFFF; border:1px solid #E5E7EB;
}
.cj-why-row .col{
  font-size:14px; color:#1b324a;
}
.cj-why-row .col--feat{
  font-weight:700; color:#0F2D4C;
}
.cj-why-row .col--brand{
  font-weight:800; color:#0B4D9A;
}

/* Responsive */
@media (max-width:640px){
  .cj-why-compare{ padding:10px; }
  .cj-why-row{ grid-template-columns: 1fr; gap:4px; }
  .cj-why-row--head{
    grid-template-columns: 1fr;
  }
  .cj-why-row .col{
    padding:2px 0;
  }
  .cj-why-row .col--feat{
    border-bottom:1px dashed #e5e7eb; padding-bottom:6px; margin-bottom:4px;
  }
}
/* ===== HOME — ¿Por qué elegirnos? (pulido responsive) ===== */

/* Envoltorio con gutters seguros */
.cj-why-wrap{
  max-width:1200px;
  margin:28px auto;
  padding:0;
  overflow-x:hidden;              /* cinturón anti-desborde */
}

/* Título */
.cj-why-head h2{
  margin:0 0 14px 0;
  color:#002041; font-weight:900; text-transform:uppercase; letter-spacing:.6px;
  font-size:clamp(22px, 5vw, 32px); line-height:1.1;
}

/* ===== Cards "por qué" ===== */
.cj-why-cards{
  display:grid; gap:12px;
  grid-template-columns:1fr;
}
@media (min-width:720px){
  .cj-why-cards{ grid-template-columns: repeat(6, 1fr); grid-auto-flow:dense; }
  .cj-why-card-0{ grid-column: span 3; }
  .cj-why-card-1{ grid-column: span 3; }
  .cj-why-card-2{ grid-column: span 4; }
  .cj-why-card-3{ grid-column: span 2; }
}
.cj-why-card{
  background:#F5F7FA; border-radius:14px; padding:16px 18px;
  display:flex; flex-direction:column; gap:6px; min-height:120px;
}
.cj-why-card h3{ margin:0; color:#0F2D4C; font-weight:800; font-size:clamp(15px, 2.2vw, 18px); }
.cj-why-card p{ margin:0; color:#23344a; font-size:14px; line-height:1.4; }

/* ===== Comparativa tipo tabla (desktop) ===== */
.cj-why-compare{
  margin-top:16px;
  background:#FBFBFB; border-radius:14px; padding:12px;
  display:grid; gap:8px;
}
.cj-why-row{
  display:grid; grid-template-columns: 1.1fr .9fr 1fr; gap:8px;
  align-items:center; padding:10px 10px; border-radius:10px;
}
.cj-why-row--head{ background:#EFF3F7; font-weight:800; color:#0F2D4C; }
.cj-why-row:not(.cj-why-row--head){ background:#FFFFFF; border:1px solid #E5E7EB; }
.cj-why-row .col{ font-size:14px; color:#1b324a; min-width:0; }
.cj-why-row .col--feat{ font-weight:700; color:#0F2D4C; }
.cj-why-row .col--brand{ font-weight:800; color:#0B4D9A; }

/* ===== Mobile makeover: filas -> cards apiladas ===== */
@media (max-width:640px){
  /* Quitamos el “bloque gris” para que se sienta más ligero */
  .cj-why-compare{
    padding:0;
    background:transparent;
    gap:12px;
  }

  /* Ocultamos la cabecera de tabla */
  .cj-why-row--head{ display:none; }

  /* Cada fila es una card */
  .cj-why-row{
    grid-template-columns: 1fr;     /* apilado */
    background:#fff;
    border:1px solid #E8ECF2;
    border-radius:12px;
    padding:12px 14px;
    gap:8px;
    box-shadow: 0 1px 0 rgba(16,24,40,.02);
  }

  /* Característica arriba como título de la card */
  .cj-why-row .col--feat{
    font-weight:800; color:#0F2D4C;
    border-bottom:1px dashed #eaeef4;
    padding-bottom:6px; margin-bottom:4px;
  }

  /* “Oficial” y “Cloud Jersey” con etiqueta encima (sin HTML extra) */
  .cj-why-row .col{
    display:grid;
    grid-template-columns: 1fr;
    gap:4px;
    padding:0;                       /* quitamos rellenos sobrantes */
  }
  .cj-why-row .col::before{
    content: attr(data-label);
    font-size:11px; font-weight:700; letter-spacing:.25px;
    text-transform:uppercase;
    color:#6B7280;
  }

  /* Destacar nuestra columna con fondo sutil */
  .cj-why-row .col--brand{
    background:#0b4d9a0e;            /* azul muy suave */
    border:1px solid #d8e3f7;
    border-radius:8px;
    padding:8px;
  }
}

/* Zebra suave en desktop para legibilidad */
@media (min-width:641px){
  .cj-why-row:nth-child(odd):not(.cj-why-row--head){ background:#FFFFFF; }
  .cj-why-row:nth-child(even):not(.cj-why-row--head){ background:#FDFDFE; }
}

/* Evitar desbordes inesperados en cualquier tamaño */
.cj-why-compare, .cj-why-row, .cj-why-row .col{ min-width:0; }
/* ===== Comparativa vertical por columnas ===== */
.cj-why-compare.vstack{
  margin-top:16px;
  display:grid;
  gap:14px;
  background:transparent;
  padding:0;
}

/* Dos tarjetas: Oficial / Cloud Jersey */
.cj-col-card{
  background:#FFFFFF;
  border:1px solid #E5E7EB;
  border-radius:14px;
  padding:16px;
  box-shadow:0 1px 0 rgba(16,24,40,.02);
}
.cj-col-title{
  margin:0 0 10px 0;
  font-weight:900;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:#002041;
  font-size:clamp(16px,2.6vw,18px);
}

/* Lista vertical de características */
.cj-col-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.cj-col-item{
  display:grid;
  grid-template-columns: 1fr auto;   /* feat | valor */
  align-items:center;
  gap:10px;
  padding:10px 0;
  border-bottom:1px dashed #E5E7EB;
}
.cj-col-item:last-child{ border-bottom:none; }

.cj-col-item .feat{
  color:#0F2D4C;
  font-weight:700;
  font-size:14px;
}
.cj-col-item .val{
  justify-self:end;
  font-size:14px;
  color:#1b324a;
}

/* Estilo de énfasis para nuestra columna */
.cj-col-brand{
  border-color:#D8E3F7;
  background: #0b4d9a0a;             /* azul muy suave */
}
.cj-col-brand .cj-col-title{ color:#0B4D9A; }

/* Layout responsive: móvil apilado, desktop 2 columnas */
@media (min-width: 820px){
  .cj-why-compare.vstack{
    grid-template-columns: 1fr 1fr;
    gap:16px;
  }
}

/* Seguridad anti-desborde en móvil estrecho */
.cj-why-compare, .cj-col-card, .cj-col-item{ min-width:0; }
.cj-col-item .feat, .cj-col-item .val{ min-width:0; }
.cj-col-item .val{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Gutter global del bloque */
.cj-why-wrap{ overflow-x:hidden; }