/* comparativas — CSS específico de esta página.
   Extraído del bloque <style> inline de la plantilla (regla del sistema:
   ninguna plantilla lleva CSS inline). Los tokens heredados que usa
   (--color-*, --radius-*, --shadow-*) ya apuntan al sistema nuevo desde
   bridge.css, así que adopta la paleta sin reescribir cada valor. */



.cmp-page .cta-final-section{padding:60px 0}
.cmp-page .section-desc{margin-bottom:0}
.cmp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:860px;margin:44px auto 0}
.cmp-card{display:flex;flex-direction:column;background:var(--color-white);border:1px solid var(--color-gray-border);border-radius:18px;padding:32px 30px;text-decoration:none;transition:var(--transition-smooth);box-shadow:0 2px 12px rgba(13,17,32,.04)}
.cmp-card:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(13,17,32,.10);border-color:var(--color-bolt)}
.cmp-card-label{font-family:var(--font-brand);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.5px;color:var(--color-bolt);font-weight:700;margin-bottom:12px}
.cmp-card-title{font-family:var(--font-brand);font-size:var(--text-xl);font-weight:800;color:var(--color-ink);margin-bottom:12px;line-height:1.15}
.cmp-card-title .cmp-vs{color:var(--color-gray-text);font-weight:600;font-style:italic}
.cmp-card-desc{font-size:var(--text-base);color:var(--color-gray-text);line-height:1.6;margin-bottom:24px}
.cmp-card-cta{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-brand);font-weight:700;color:var(--color-bolt);font-size:var(--text-md)}
.cmp-card-cta svg{transition:transform .2s ease}
.cmp-card:hover .cmp-card-cta svg{transform:translateX(4px)}
@media(max-width:720px){
    .cmp-grid{grid-template-columns:1fr;max-width:460px;margin-top:32px}


    .cmp-page .cta-final-section{padding:48px 0}
}