/* ============================
   Home – estilo Apple (definitivo modificado)
   ============================ */

/* Fondo global claro */
html, body { background:#f6f7fb !important; }

/* Contenedor */
.op-home{
  max-width:1120px;
  margin:0 auto;
  padding:48px 24px 40px;
  color:#0f172a;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* HERO centrado */
.op-hero{
  background:#fff;
  border:1px solid #e8ecf3;
  border-radius:18px;
  padding:56px 40px;
  text-align:center;
}
.op-hero__title{
  margin:0 0 16px;
  font-size:48px;
  line-height:1.18;
  letter-spacing:-.3px;
  font-weight:600;
}
.op-hero__subtitle{
  margin:0 0 20px;
  font-size:18px;
  color:#556070;
}
.op-hero__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.op-hero__stats{
  margin:16px 0 0;
  font-size:14px;
  color:#64748b;
}

/* Botones pill */
.btn-primary{
  display:inline-block;background:#007aff;color:#fff;
  font-weight:700;padding:12px 20px;border-radius:999px;
  text-decoration:none;transition:filter .15s ease;
}
.btn-primary:hover{filter:brightness(.96);}
.btn-secondary{
  display:inline-block;background:#eef2f7;color:#0f172a;
  font-weight:600;padding:12px 20px;border-radius:999px;
  text-decoration:none;transition:background .15s ease;
}
.btn-secondary[aria-disabled="true"]{opacity:.6;pointer-events:none;}
.btn-secondary:hover{background:#e7ebf2;}

/* SECCIÓN CENTRAL – SIN TARJETAS (sin recuadro) */
.op-blocks{
  margin-top:32px;
  display:grid;
  gap:24px;
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .op-blocks{grid-template-columns:repeat(3,1fr);}
}
/* Quitamos fondo, borde y sombra; mantenemos padding y centrado */
.op-blk{
  background:transparent;       /* antes #fff */
  border:0;                     /* antes 1px sólido */
  border-radius:0;              /* sin esquinas redondeadas */
  box-shadow:none;              /* sin sombra */
  padding:28px;                 /* mismo espacio interno */
  text-align:center;            /* centrado de títulos/texto/botón */
}
.op-blk h2{margin:0 0 10px;font-size:21px;font-weight:700;}
.op-blk p{margin:0 0 16px;color:#5f6b7a;font-size:17px;}
.op-blk__actions{margin-top:auto;display:flex;justify-content:center;}

/* FILA DOS COLUMNAS: Ranking + Corrección (estas sí con tarjeta) */
.op-row{
  margin-top:40px;
  display:grid;gap:28px;
  grid-template-columns:1fr;
}
@media (min-width: 960px){
  .op-row{grid-template-columns:1fr 1fr;}
}
.op-col{
  background:#fff;border:1px solid #e8ecf3;border-radius:16px;
  padding:28px;
}
.op-col h2{margin:0 0 12px;font-size:24px;font-weight:700;}
.op-col p{margin:0 0 14px;color:#5f6b7a;font-size:17px;}
.op-col__actions{margin-top:12px}

/* Tabla ranking estilo Apple */
.op-table{margin-top:12px;border:1px solid #eaeef5;border-radius:14px;overflow:hidden}
.op-tr{display:grid;grid-template-columns:1.2fr .6fr 1fr;}
.op-tr > div{padding:10px 12px;border-top:1px solid #eef2f7;}
.op-tr:first-child > div{border-top:0}
.op-th{background:#f8fafc;font-weight:600;color:#334155}

/* Lista de viñetas */
.op-list{margin:8px 0 14px 18px;color:#334155}
.op-list li{margin:6px 0}

/* Imagen corrección */
.op-imgcard{margin-top:14px;border:1px solid #edf1f7;border-radius:14px;padding:8px}
.op-imgcard img{display:block;max-width:100%;height:auto;border-radius:8px}

/* CTA final */
.op-cta{text-align:center;margin:36px 0 0;}
.op-cta .btn-primary{padding:12px 24px;}

/* Responsive */
@media (max-width: 860px){
  .op-hero{padding:40px 20px;}
  .op-hero__title{font-size:36px;line-height:1.12;}
}