/* Landing de Gesagix — estilos propios (sin framework).
   Paleta: la misma de web_admin/src/index.css. El latón RELLENA con tinta
   grafito encima y ESCRIBE sobre fondo oscuro; nunca blanco sobre latón. */

:root {
    --bg: #0B0703;
    --bg-2: #110B05;
    --surface: #181109;
    --surface-2: #21180C;
    --line: rgba(250, 205, 120, 0.10);
    --line-2: rgba(250, 205, 120, 0.18);
    --text: #F6EEDF;
    --muted: #B8AA93;
    --dim: #93866F;
    --brass: #ECAF1A;
    --brass-300: #FACD78;
    --brass-600: #C68D00;
    --ink: #0D0802;
    --wa: #25D366;
    --ok: #34D399;
    --radius: 20px;
    --container: 1180px;
    --display: 'Outfit', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--display);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .container { padding: 0 32px; } }

.eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--brass-300);
}
.eyebrow::before { content: ''; width: 18px; height: 1px; background: currentColor; opacity: .6; }

/* ── Botones ───────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 0 26px; border-radius: 14px;
    font-weight: 600; font-size: 16px; letter-spacing: -0.01em;
    border: 1px solid transparent; cursor: pointer;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn-primary { background: var(--brass); color: var(--ink); box-shadow: 0 10px 40px -12px rgba(236, 175, 26, .55); }
.btn-primary:hover { background: var(--brass-300); transform: translateY(-2px); }
.btn-ghost { background: rgba(255, 244, 223, .04); color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { background: rgba(255, 244, 223, .08); border-color: rgba(250, 205, 120, .35); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 15px; border-radius: 12px; }

/* ── Navegación ────────────────────────────── */
.nav {
    position: fixed; inset: 0 0 auto 0; z-index: 50;
    transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
    border-bottom: 1px solid transparent;
}
.nav.is-scrolled { background: rgba(11, 7, 3, .78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 22px; letter-spacing: -0.03em; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.nav-links { display: none; gap: 32px; font-size: 15px; color: var(--muted); }
.nav-links a:hover { color: var(--text); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-login { display: none; }
@media (min-width: 900px) { .nav-links { display: flex; } }
@media (min-width: 560px) { .nav-login { display: inline-flex; } }

/* ── Hero ──────────────────────────────────── */
.hero { position: relative; padding: 132px 0 64px; overflow: hidden; }
@media (min-width: 960px) { .hero { padding: 168px 0 96px; } }
/* La lámpara: un cono de luz cálida que cae sobre el producto (el mismo
   concepto del logo "Foco"). */
.spot {
    position: absolute; pointer-events: none; z-index: 0;
    inset: -10% -20% auto -20%; height: 110%;
    background:
        radial-gradient(38% 55% at 62% 0%, rgba(236, 175, 26, .20), transparent 70%),
        radial-gradient(60% 40% at 62% 12%, rgba(250, 205, 120, .08), transparent 75%);
}
.grain {
    position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
    background-image: linear-gradient(rgba(250, 205, 120, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(250, 205, 120, .035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(70% 60% at 50% 20%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(70% 60% at 50% 20%, #000 20%, transparent 75%);
}
.hero-grid { position: relative; z-index: 1; display: grid; gap: 56px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; } }
.hero h1 { font-size: clamp(48px, 9vw, 92px); font-weight: 700; margin: 22px 0 24px; }
.hero h1 em { font-style: normal; color: var(--brass); }
.lead { font-size: clamp(17px, 2.2vw, 20px); color: var(--muted); max-width: 34em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-note { margin-top: 20px; font-size: 14px; color: var(--dim); }
.hero-note b { color: var(--muted); font-weight: 600; }

/* Maqueta del producto en el hero */
.stage { position: relative; padding: 72px 0 150px; }
.hero-grid > *, .split > * { min-width: 0; }
/* La burbuja y el comprobante se anclan a la tarjeta, no al escenario, para
   que tapen solo sus bordes a cualquier ancho. */
.oc-wrap { position: relative; max-width: 420px; margin: 0 auto; }
.card {
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 244, 223, .05);
}
.order-card { position: relative; z-index: 2; padding: 24px; }
.oc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.oc-num { font-size: 13px; color: var(--dim); font-weight: 500; }
.oc-title { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; margin-top: 2px; }
.oc-sub { font-size: 14px; color: var(--muted); }
.pill {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
    background: rgba(52, 211, 153, .12); color: var(--ok);
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.oc-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 22px 0 8px; }
.oc-steps span { height: 6px; border-radius: 99px; background: rgba(250, 205, 120, .12); }
.oc-steps span.on { background: var(--brass); }
.oc-steps-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); }
.oc-lines { margin-top: 20px; border-top: 1px dashed var(--line-2); padding-top: 16px; display: grid; gap: 10px; font-size: 14.5px; }
.oc-line { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.oc-line b { color: var(--text); font-weight: 600; }
.oc-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.oc-total span { color: var(--muted); font-size: 14px; }
.oc-total strong { font-size: 26px; letter-spacing: -0.02em; }

.float { position: absolute; z-index: 3; }
.wa-bubble {
    left: -28px; top: calc(100% - 22px); width: min(300px, 86%);
    background: #1F2C24; border: 1px solid rgba(37, 211, 102, .25); border-radius: 18px 18px 18px 6px;
    padding: 14px 16px; font-size: 14px; line-height: 1.45; color: #E9EDEF;
    box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .9);
}
.wa-bubble .wa-from { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--wa); font-weight: 600; margin-bottom: 6px; }
.wa-bubble .wa-from svg { width: 15px; height: 15px; }
.wa-bubble .wa-link { color: #53BDEB; }
.wa-bubble .wa-time { text-align: right; font-size: 11px; color: #8696A0; margin-top: 4px; }
.receipt {
    right: -28px; top: -66px; padding: 14px 16px; display: flex; gap: 12px; align-items: center;
    background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 16px;
    box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .9); font-size: 13.5px;
}
.receipt .ic { width: 38px; height: 38px; border-radius: 10px; background: rgba(236, 175, 26, .14); color: var(--brass); display: grid; place-items: center; }
.receipt .ic svg { width: 20px; height: 20px; }
.receipt b { display: block; font-size: 14.5px; }
.receipt span { color: var(--ok); font-weight: 500; }
@media (max-width: 600px) {
    .wa-bubble { left: -6px; }
    .receipt { right: -6px; }
}
@media (max-width: 480px) {
    .receipt { position: relative; top: auto; right: auto; margin: 0 0 14px auto; width: max-content; max-width: 100%; }
    .stage { padding-top: 0; }
}

/* ── Rubros ────────────────────────────────── */
.trades { border-block: 1px solid var(--line); background: var(--bg-2); }
.trades-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 36px; padding: 26px 0; }
.trades-inner p { font-size: 14px; color: var(--dim); }
.trade { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; color: var(--muted); }
.trade svg { width: 20px; height: 20px; color: var(--brass-300); }

/* ── Secciones ─────────────────────────────── */
.section { padding: 96px 0; position: relative; }
@media (min-width: 960px) { .section { padding: 128px 0; } }
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(34px, 5.2vw, 56px); margin: 18px 0 18px; }
.section-head p { color: var(--muted); font-size: 18px; }

/* El recorrido de una orden */
.journey { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: paso; }
@media (min-width: 720px) { .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .journey { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step { position: relative; padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); counter-increment: paso; }
.step::before {
    content: counter(paso, decimal-leading-zero);
    position: absolute; top: 24px; right: 26px; font-size: 14px; font-weight: 600; color: var(--dim); letter-spacing: .04em;
}
.step-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brass-300); }
.step-status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.step h3 { font-size: 22px; margin: 14px 0 10px; letter-spacing: -0.02em; line-height: 1.2; }
.step p { color: var(--muted); font-size: 15.5px; }

/* Funciones (bento) */
.bento { display: grid; gap: 16px; }
@media (min-width: 720px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bento .wide { grid-column: span 2; } }
.feat { padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: border-color .25s ease, transform .25s ease; }
.feat:hover { border-color: var(--line-2); transform: translateY(-3px); }
.feat .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(236, 175, 26, .12); color: var(--brass); margin-bottom: 22px; }
.feat .ic svg { width: 22px; height: 22px; }
.feat h3 { font-size: 20px; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 8px; }
.feat p { color: var(--muted); font-size: 15.5px; }
.docs { display: grid; gap: 8px; margin-top: 22px; }
.doc { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; background: rgba(255, 244, 223, .03); border: 1px solid var(--line); font-size: 14px; }
.doc b { font-weight: 600; }
.doc span { color: var(--dim); }
.doc em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--ok); white-space: nowrap; }

/* Tu cliente lo ve así */
.split { display: grid; gap: 56px; align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; } }
.checks { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 14px; }
.checks li { display: flex; gap: 12px; color: var(--muted); }
.checks svg { width: 22px; height: 22px; color: var(--brass); flex-shrink: 0; margin-top: 2px; }
.checks b { color: var(--text); font-weight: 600; }
.phone {
    width: min(340px, 100%); margin: 0 auto; padding: 12px; border-radius: 44px;
    background: #17120C; border: 1px solid var(--line-2);
    box-shadow: 0 60px 120px -40px rgba(236, 175, 26, .25), 0 40px 80px -30px rgba(0, 0, 0, .9);
}
.screen { border-radius: 34px; overflow: hidden; background: #0F0A05; padding: 26px 20px 24px; }
.tr-shop { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.tr-shop .av { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; color: var(--brass-300); font-size: 14px; font-weight: 700; }
.tr-title { margin-top: 22px; font-size: 13px; color: var(--dim); }
.tr-device { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-top: 2px; }
.tr-state { margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: rgba(52, 211, 153, .10); border: 1px solid rgba(52, 211, 153, .22); }
.tr-state b { color: var(--ok); display: block; font-size: 16px; }
.tr-state span { color: var(--muted); font-size: 13.5px; }
.timeline { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 0; }
.timeline li { position: relative; padding: 0 0 16px 26px; font-size: 14px; color: var(--muted); }
.timeline li::before { content: ''; position: absolute; left: 4px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--brass); }
.timeline li::after { content: ''; position: absolute; left: 8px; top: 18px; bottom: 0; width: 1px; background: rgba(236, 175, 26, .35); }
.timeline li:last-child::after { display: none; }
.timeline li.off::before { background: transparent; border: 1px solid var(--dim); }
.timeline li b { color: var(--text); font-weight: 600; display: block; font-size: 14.5px; }
.tr-btn { margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 12px; background: var(--brass); color: var(--ink); font-weight: 600; font-size: 15px; }
.tr-btn svg { width: 18px; height: 18px; }

/* Plan */
.plan {
    position: relative; overflow: hidden; padding: 48px 28px; border-radius: 28px; text-align: center;
    background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line-2);
}
@media (min-width: 768px) { .plan { padding: 72px 64px; } }
.plan h2 { font-size: clamp(32px, 4.6vw, 48px); margin: 18px auto 16px; max-width: 16em; }
.plan > p { color: var(--muted); max-width: 36em; margin: 0 auto; font-size: 18px; }
.plan-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 32px 0 36px; list-style: none; padding: 0; color: var(--muted); font-size: 15.5px; }
.plan-points li { display: inline-flex; align-items: center; gap: 8px; }
.plan-points svg { width: 18px; height: 18px; color: var(--brass); }

/* Precios */
.billing { display: flex; width: max-content; max-width: 100%; margin: -24px auto 40px; padding: 5px; gap: 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.billing-opt { font: inherit; font-size: 15px; font-weight: 600; color: var(--muted); background: none; border: 0; border-radius: 10px; padding: 10px 18px; min-height: 44px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.billing-opt span { font-size: 12px; font-weight: 600; color: var(--ok); }
.billing-opt.is-on { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.pricing { display: grid; gap: 16px; align-items: start; }
@media (min-width: 960px) { .pricing { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.price { position: relative; padding: 32px 28px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.price.is-featured { background: linear-gradient(180deg, var(--surface-2), var(--surface)); border-color: rgba(236, 175, 26, .45); box-shadow: 0 40px 90px -40px rgba(236, 175, 26, .35); }
.price-tag { position: absolute; top: -13px; left: 28px; padding: 5px 12px; border-radius: 999px; background: var(--brass); color: var(--ink); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.price h3 { font-size: 24px; letter-spacing: -0.02em; }
.price-for { color: var(--muted); font-size: 15.5px; margin-top: 6px; min-height: 2.8em; }
.price-amount { display: flex; align-items: baseline; gap: 6px; margin-top: 20px; }
.price-amount span { font-size: 22px; font-weight: 600; color: var(--muted); }
.price-amount strong { font-size: 56px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.price-amount em { font-style: normal; font-size: 17px; color: var(--muted); }
.price-note { color: var(--dim); font-size: 14.5px; margin-top: 6px; min-height: 1.6em; }
.price .btn { margin-top: 24px; width: 100%; }
.price-feats { list-style: none; margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; font-size: 15.5px; color: var(--muted); }
.price-feats li { display: flex; gap: 10px; }
.price-feats b { color: var(--text); font-weight: 600; }
.price-feats svg { width: 18px; height: 18px; color: var(--brass); flex-shrink: 0; margin-top: 3px; }
.pricing-foot { text-align: center; color: var(--dim); font-size: 15px; margin-top: 28px; }

/* Preguntas */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.faq details[open] { border-color: var(--line-2); }
.faq summary {
    list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 22px 24px; font-weight: 600; font-size: 17px; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; color: var(--brass-300); flex-shrink: 0; transition: transform .25s ease; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding: 0 24px 22px; color: var(--muted); font-size: 16px; }

/* Cierre */
.closing { text-align: center; overflow: hidden; }
.closing .spot { inset: 0 -30% auto -30%; height: 100%; background: radial-gradient(35% 60% at 50% 0%, rgba(236, 175, 26, .22), transparent 70%); }
.closing-mark { width: 88px; height: 88px; margin: 0 auto 32px; border-radius: 22px; box-shadow: 0 30px 80px -20px rgba(236, 175, 26, .6); position: relative; }
.closing h2 { position: relative; font-size: clamp(40px, 7vw, 76px); max-width: 12em; margin: 0 auto 22px; }
.closing h2 em { font-style: normal; color: var(--brass); }
.closing p { position: relative; color: var(--muted); font-size: 18px; max-width: 32em; margin: 0 auto; }
.closing .hero-cta { position: relative; justify-content: center; }

/* Pie */
.footer { border-top: 1px solid var(--line); padding: 56px 0 40px; background: var(--bg-2); }
.footer-grid { display: grid; gap: 36px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer p { color: var(--dim); font-size: 15px; max-width: 26em; margin-top: 14px; }
.footer h4 { margin: 0 0 14px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; color: var(--dim); }
.footer ul a:hover { color: var(--text); }
.footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--dim); }

/* Aparición al hacer scroll (solo si el usuario no pidió menos movimiento) */
@media (prefers-reduced-motion: no-preference) {
    .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
    .reveal.is-visible { opacity: 1; transform: none; }
    .float { animation: flotar 7s ease-in-out infinite; }
    .receipt { animation-delay: -3.5s; }
    @keyframes flotar { 50% { transform: translateY(-8px); } }
}

/* Rubros (inicio): los cinco de la campaña, cada uno a su página */
.rubros-sec { padding-bottom: 48px; }
.rubros { display: grid; gap: 16px; }
@media (min-width: 720px) { .rubros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .rubros { grid-template-columns: repeat(6, minmax(0, 1fr)); } .rubro { grid-column: span 2; } .rubro:nth-child(4) { grid-column: 2 / span 2; } }
.rubro { display: flex; flex-direction: column; padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: border-color .25s ease; }
.rubro:hover { border-color: rgba(250, 205, 120, .35); }
.rubro:focus-visible { outline: 2px solid var(--brass-300); outline-offset: 3px; }
.rubro .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(236, 175, 26, .12); color: var(--brass); margin-bottom: 20px; }
.rubro .ic svg { width: 22px; height: 22px; }
.rubro h3 { font-size: 20px; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 8px; }
.rubro p { color: var(--muted); font-size: 15.5px; }
.rubro ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rubro li { font-size: 13px; color: var(--brass-300); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 10px; }
.rubro-ir { margin-top: auto; padding-top: 20px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--brass-300); }
.rubro-ir svg { width: 18px; height: 18px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

/* Los dos rubros con más interés arriba, mecánica destacada */
@media (min-width: 1080px) {
    .rubros .rubro, .rubros .rubro:nth-child(4) { grid-column: span 2; }
    .rubros .rubro:nth-child(1), .rubros .rubro:nth-child(2) { grid-column: span 3; }
}
.rubro { position: relative; }
.rubro-top { border-color: rgba(250, 205, 120, .45); background: linear-gradient(160deg, rgba(236, 175, 26, .10), var(--surface) 55%); }
.rubro-badge { position: absolute; top: 24px; right: 24px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #1b1404; background: var(--brass); border-radius: 999px; padding: 4px 10px; }