/* ════════════════════════════════════════════════════════════════════════
   componentes.css — piezas reutilizables: botones, tarjetas, tablas de
   precios, bloque de contacto y nota. Cada una se puede usar en cualquier
   página sin arrastrar nada más.
   ════════════════════════════════════════════════════════════════════════ */

/* ── etiqueta pequeña sobre el titular ── */
.eyebrow{display:inline-block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
         color:var(--brand);border:1px solid var(--line);border-radius:99px;padding:.35rem .9rem;
         background:var(--card)}

/* ── botones ── */
.btn{display:inline-block;background:var(--brand);color:var(--brand-ink);text-decoration:none;
     font-weight:600;padding:.8rem 1.6rem;border-radius:8px}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);margin-left:.6rem}

/* ── rejilla de tarjetas ── */
.grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.5rem}
.card h3{margin:.6rem 0 .4rem;font-size:1.05rem}
.card p{margin:0;color:var(--muted);font-size:.95rem}
.ico{font-size:1.6rem;line-height:1}

/* ── tabla de precios ── */
table{width:100%;border-collapse:collapse;font-size:.97rem}
th,td{text-align:left;padding:.85rem 0;border-bottom:1px solid var(--line)}
th{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
td:last-child,th:last-child{text-align:right;font-variant-numeric:tabular-nums}

/* ── bloque de contacto ── */
.contact{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.contact div strong{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
                    color:var(--muted);margin-bottom:.3rem;font-weight:600}

/* ── nota / aviso ── */
.note{background:var(--card);border:1px dashed var(--line);border-radius:10px;
      padding:.9rem 1.1rem;font-size:.88rem;color:var(--muted);margin-top:1.5rem}
code{background:color-mix(in srgb,var(--brand) 12%,transparent);padding:.15em .4em;
     border-radius:4px;font-size:.88em}