/* Blog de SplitTicket — estilos compartidos (marca reutilizada, sin los efectos
   del landing). Fuentes self-hosted desde /fonts/. */
@font-face{font-family:'Bricolage Grotesque';font-weight:800;font-display:swap;src:url('/fonts/bricolage-800.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2013-2014,U+20AC,U+2122,U+2212}
@font-face{font-family:'Plus Jakarta Sans';font-weight:400;font-display:swap;src:url('/fonts/jakarta-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2013-2014,U+20AC,U+2122,U+2212}
@font-face{font-family:'Plus Jakarta Sans';font-weight:600;font-display:swap;src:url('/fonts/jakarta-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2013-2014,U+20AC,U+2122,U+2212}
@font-face{font-family:'Plus Jakarta Sans';font-weight:700;font-display:swap;src:url('/fonts/jakarta-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2013-2014,U+20AC,U+2122,U+2212}
@font-face{font-family:'Plus Jakarta Sans';font-weight:800;font-display:swap;src:url('/fonts/jakarta-800.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2013-2014,U+20AC,U+2122,U+2212}

:root{
  --green:#1B5E4A; --green-mid:#237A5E; --amber:#F5B301; --amber-deep:#D99A00; --amber-ink:#241A00;
  --ink:#15201B; --muted:#59645C; --bg:#F6F5F0; --card:#FFFFFF; --rule:#E4E2DA; --dark:#0F1512;
}
@media (prefers-color-scheme: dark){
  :root{ --ink:#E9EDE7; --muted:#9AA69C; --bg:#0E110F; --card:#161B17; --rule:#26302A; }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Plus Jakarta Sans',system-ui,sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}
.wrap{max-width:44rem;margin:0 auto;padding:0 1.4rem}

/* nav */
header.bnav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--dark) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.bnav-in{max-width:60rem;margin:0 auto;padding:0 1.4rem;height:4rem;display:flex;align-items:center;justify-content:space-between}
.bnav .brand{display:inline-flex;align-items:center;gap:.55rem;color:#fff}
.bnav .brand img{width:1.9rem;height:1.9rem;border-radius:.45rem}
.wm{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.02em;font-size:1.2rem}
.wm .b{color:var(--amber)}
.bnav .cta{background:var(--amber);color:var(--amber-ink);font-weight:700;font-size:.9rem;padding:.5rem 1rem;border-radius:.7rem}

/* article */
.post{padding:3rem 0 1rem}
.eyebrow{display:inline-block;color:var(--amber-deep);font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.8rem}
@media (prefers-color-scheme: dark){.eyebrow{color:var(--amber)}}
.post h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.1;font-size:clamp(1.9rem,5vw,2.9rem);margin:.2rem 0 .6rem;text-wrap:balance}
.post .meta{color:var(--muted);font-size:.9rem;margin-bottom:2rem}
.prose{font-size:1.09rem}
.prose h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.55rem;line-height:1.2;margin:2.4rem 0 .8rem}
.prose h3{font-weight:800;font-size:1.2rem;margin:1.8rem 0 .5rem}
.prose p{margin:0 0 1.1rem}
.prose ul,.prose ol{margin:0 0 1.2rem;padding-left:1.3rem}
.prose li{margin-bottom:.5rem}
.prose strong{font-weight:700}
.prose a{color:var(--green-mid);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.prose blockquote{margin:1.5rem 0;padding:.2rem 0 .2rem 1.2rem;border-left:3px solid var(--amber);color:var(--muted);font-style:italic}
.prose table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.98rem}
.prose th,.prose td{border:1px solid var(--rule);padding:.6rem .7rem;text-align:left}
.prose th{background:color-mix(in srgb,var(--amber) 12%,transparent);font-weight:700}

/* callout / CTA */
.callout{margin:2rem 0;padding:1.4rem 1.5rem;border-radius:1rem;background:linear-gradient(150deg,#12463a,#1B5E4A);color:#EAF3EE}
.callout h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.25rem;margin:0 0 .4rem;color:#fff}
.callout p{margin:0 0 1rem;color:rgba(255,255,255,.85)}
.callout .btn{display:inline-block;background:var(--amber);color:var(--amber-ink);font-weight:700;padding:.65rem 1.2rem;border-radius:.7rem}

.post-foot{margin:2.5rem 0 1rem;padding-top:1.4rem;border-top:1px solid var(--rule);color:var(--muted);font-size:.95rem}
.post-foot a{color:var(--green-mid);font-weight:600}

/* blog index */
.blog-hero{padding:3.2rem 0 1rem}
.blog-hero h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(2rem,5vw,3rem);letter-spacing:-.02em;margin:.3rem 0 .5rem}
.blog-hero p{color:var(--muted);font-size:1.1rem;margin:0}
.cards{display:grid;gap:1.1rem;padding:1.5rem 0 1rem}
.card{display:block;padding:1.4rem 1.5rem;border:1px solid var(--rule);border-radius:1rem;background:var(--card);transition:transform .12s ease,box-shadow .12s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 16px 40px -24px rgba(20,72,58,.45)}
.card .k{color:var(--amber-deep);font-weight:700;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase}
@media (prefers-color-scheme: dark){.card .k{color:var(--amber)}}
.card h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.3rem;line-height:1.2;margin:.35rem 0 .4rem}
.card p{color:var(--muted);margin:0;font-size:1rem}

/* footer (oscuro, como el sitio) */
footer.bfoot{background:#0F1512;color:rgba(255,255,255,.62);border-top:1px solid rgba(255,255,255,.08);padding:2.5rem 0;margin-top:3rem;font-size:.92rem}
.bfoot .wm{color:#fff;font-size:1.1rem}
.bfoot-in{max-width:60rem;margin:0 auto;padding:0 1.4rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
.bfoot a{color:rgba(255,255,255,.82);font-weight:600}
.bfoot a:hover{color:var(--amber)}