/* classmait — páginas de aterrizaje para buscadores (las genera tools/landing_pages.py).
   El diseño viene de styles.css (el mismo que la portada); aquí solo lo que es propio
   de estas páginas estáticas: enlaces en vez de botones y la tabla comparativa. */
body{margin:0}
.lpx a{text-decoration:none}
.lpx .lp-nav a{display:inline-block;padding:7px 12px;border-radius:999px;font-size:14px;color:var(--ink-2)}
.lpx .lp-nav a:hover{background:var(--fill);color:var(--ink)}
.lpx .lp-eyebrow svg{width:15px;height:15px}
.lpx .lp-hero h1{max-width:18ch}
.lpx .lp-shots{margin-bottom:40px}

/* tarjetas: h3 en lugar de b (mismo aspecto que en la portada) */
.lpx .iq-card h3{margin:0;font-family:var(--font-display);font-size:21px;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.lpx-grid{grid-template-columns:repeat(3,1fr)}
.lpx-grid::before,.lpx-steps::before{display:none}
.lpx-steps{grid-template-columns:repeat(3,1fr)}
.lpx-steps .iq-card{padding-top:52px}
.lpx-steps .iq-n{left:22px;right:auto;font-size:15px;color:var(--accent-text,var(--accent))}
@media (max-width:1000px){ .lpx-grid,.lpx-steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .lpx-grid,.lpx-steps{grid-template-columns:1fr} }

.lpx-prose{max-width:62ch;margin-bottom:0}

/* tabla comparativa */
.lpx-table{max-width:860px;margin:0 auto;background:var(--surface);border-radius:24px;box-shadow:var(--shadow);overflow-x:auto;text-align:left}
.lpx-table table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.lpx-table th,.lpx-table td{padding:14px 18px;border-bottom:1px solid var(--sep);vertical-align:top;color:var(--ink-2)}
.lpx-table thead th{font-family:var(--font-display);font-size:15px;color:var(--ink);font-weight:600}
.lpx-table thead th.us{color:var(--accent-text,var(--accent))}
.lpx-table tbody th{color:var(--ink);font-weight:600}
.lpx-table td:last-child{color:var(--ink);font-weight:500}
.lpx-table tr:last-child th,.lpx-table tr:last-child td{border-bottom:0}

/* otras páginas */
.lpx-rels{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:left;margin-top:30px}
.lpx-rel{display:flex;flex-direction:column;gap:6px;background:var(--surface);border-radius:20px;padding:20px;box-shadow:var(--shadow);color:var(--ink);transition:transform .2s ease-out,box-shadow .2s ease-out}
.lpx-rel b{font-family:var(--font-display);font-size:17px;letter-spacing:-.01em}
.lpx-rel span{font-size:14.5px;color:var(--ink-2);line-height:1.45}
@media (hover:hover) and (pointer:fine){ .lpx-rel:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)} }
@media (max-width:900px){ .lpx-rels{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .lpx-rels{grid-template-columns:1fr} }

.lpx .lp-foot .links{line-height:1.9}
.lpx .lp-foot a:hover{text-decoration:underline}