/* =============================================================
   BLOG SAPCOL GS — subdominio de contenido
   Sistema de diseño heredado de www.sapcolgs.com / villavicencio
   (tipografías, botones, hairline-grid, footer) con adaptaciones
   propias para listado y detalle de publicaciones.
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg:        #ffffff;
  --bg-2:      #f2f1ee;
  --ink:       #141414;
  --ink-soft:  #2e2e2e;
  --ink-mute:  #6b6b6b;
  --accent:    #ed1b24;
  --accent-dark: #b3141c;
  --navy:      #141414;
  --line:      #141414;
  --line-soft: rgba(20,20,20,0.14);
  --cream:     #f6f3ec;

  --display: "Ranade", "Space Grotesk", -apple-system, sans-serif;
  --subtitle: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --nav-h: 72px;
  --topbar-h: 42px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--topbar-h) + 12px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
ul { list-style: none; padding: 0; }
h1, h2 { text-wrap: balance; line-height: 1.1; letter-spacing: -0.01em; font-family: var(--display); font-weight: 700; }
h3, h4 { text-wrap: balance; line-height: 1.15; letter-spacing: -0.01em; font-family: var(--subtitle); font-weight: 700; }
::selection { background: var(--accent); color: var(--cream); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .7rem 1.1rem; background: var(--ink); color: var(--cream);
  font-family: var(--mono); font-size: .85rem;
  transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* =============================================================
   3. Utilities
   ============================================================= */
.container { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 720px)  { .container { padding-inline: 2rem; } }
@media (min-width: 1280px) { .container { padding-inline: 3rem; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.section { padding-block: 3.2rem; border-top: 1px solid var(--line); position: relative; }
@media (min-width: 960px) { .section { padding-block: 4.75rem; } }
.section.is-tinted { background: var(--bg-2); }

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1.5rem; margin-bottom: 1.8rem; }
@media (min-width: 960px) { .section-head { margin-bottom: 2.75rem; } }
.section-num { font-family: var(--mono); font-size: .95rem; color: var(--accent-dark); letter-spacing: .04em; }
.section-title { font-size: clamp(1.9rem, 5vw, 3.2rem); }
.section-lede { max-width: 62ch; color: var(--ink-soft); font-size: 1.05rem; }

/* =============================================================
   4. Buttons
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 1.5rem;
  font-family: var(--mono); font-size: .85rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  border: 1.5px solid var(--ink);
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);
  text-align: center; max-width: 100%;
}
@media (min-width: 540px) { .btn { white-space: nowrap; } }
.btn-primary { background: var(--ink); color: var(--cream); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--ink); color: var(--cream); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn-accent:hover, .btn-accent:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; }

/* =============================================================
   5. Topbar + Nav
   ============================================================= */
.topbar {
  position: fixed; top: 0; inset-inline: 0; z-index: 501; height: var(--topbar-h);
  background: var(--navy); color: var(--cream); display: flex; align-items: center;
}
.topbar-inner {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .02em;
}
.topbar-msg { color: rgba(246,243,236,0.7); }
.topbar-msg strong { color: var(--cream); font-weight: 500; }
.topbar-back {
  display: inline-flex; align-items: center; gap: .4rem; color: var(--cream);
  padding-block: .2rem; border-bottom: 1px solid rgba(246,243,236,0.4);
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out); white-space: nowrap;
}
.topbar-back:hover { color: var(--accent); border-color: var(--accent); }

.nav {
  position: fixed; top: var(--topbar-h); inset-inline: 0; z-index: 500; height: var(--nav-h);
  display: flex; align-items: center; background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease-out);
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav-inner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; }
.brand-logo { height: 40px; width: auto; display: block; }
.brand-word { font-family: var(--mono); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mute); border-left: 1px solid var(--line-soft); padding-left: .7rem; }
.nav-links { display: none; align-items: center; gap: 1.5rem; font-family: var(--subtitle); font-weight: 700; font-size: .86rem; letter-spacing: .01em; }
@media (min-width: 1000px) { .nav-links { display: flex; } }
.nav-link { position: relative; padding-block: .3rem; color: var(--ink-soft); transition: color .3s var(--ease-out); }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out);
}
.nav-link:hover, .nav-link.is-active { color: var(--ink); }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { display: none; }
@media (min-width: 1000px) { .nav-cta { display: inline-flex; } }
.nav-burger { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1.5px solid var(--ink); }
@media (min-width: 1000px) { .nav-burger { display: none; } }
.nav-burger-lines { position: relative; width: 18px; height: 12px; }
.nav-burger-lines span { position: absolute; left: 0; right: 0; height: 2px; background: var(--ink); transition: transform .3s var(--ease-out), opacity .3s var(--ease-out), top .3s var(--ease-out); }
.nav-burger-lines span:nth-child(1) { top: 0; }
.nav-burger-lines span:nth-child(2) { top: 5px; }
.nav-burger-lines span:nth-child(3) { top: 10px; }
.nav-burger[aria-expanded="true"] .nav-burger-lines span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger-lines span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .nav-burger-lines span:nth-child(3) { top: 5px; transform: rotate(-45deg); }

.nav-mobile {
  position: fixed; inset: calc(var(--nav-h) + var(--topbar-h)) 0 0 0; z-index: 400;
  background: var(--ink); color: var(--cream);
  clip-path: inset(0 0 100% 0); transition: clip-path .5s var(--ease-soft); overflow-y: auto;
}
.nav-mobile[data-open="true"] { clip-path: inset(0 0 0 0); }
@media (min-width: 1000px) { .nav-mobile { display: none; } }
.nav-mobile-inner { padding: 2.5rem 1.25rem; display: flex; flex-direction: column; gap: 1.4rem; }
.nav-mobile a { font-family: var(--display); font-size: 1.5rem; text-transform: uppercase; font-weight: 800; border-bottom: 1px solid rgba(246,243,236,0.18); padding-bottom: .7rem; }
.nav-mobile .btn { align-self: flex-start; margin-top: .5rem; }
.nav-mobile .btn-ghost { color: var(--cream); border-color: rgba(246,243,236,0.4); }
.nav-mobile .btn-ghost:hover, .nav-mobile .btn-ghost:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* =============================================================
   6. Hero
   ============================================================= */
.hero {
  position: relative; overflow: hidden;
  padding-top: calc(var(--nav-h) + var(--topbar-h) + 2rem); padding-bottom: 3rem; border-top: 0;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(237,27,36,0.10), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(20,20,20,0.08), transparent 55%);
}
.hero > .container { position: relative; z-index: 1; }
.hero-grid { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 7fr 5fr; gap: 3rem; align-items: center; } }
.hero-kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; color: var(--accent-dark);
  margin-bottom: 1.4rem; flex-wrap: wrap;
}
.hero-kicker::before { content: ""; width: 8px; height: 8px; background: var(--accent); flex-shrink: 0; }
.hero-title { font-size: clamp(2.1rem, 5.6vw, 3.8rem); max-width: 20ch; }
.hero-title span { color: var(--accent-dark); }
.hero-sub { margin-top: 1rem; font-family: var(--subtitle); font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 700; color: var(--ink-soft); max-width: 46ch; }
.hero-lede { margin-top: 1.2rem; max-width: 54ch; font-size: 1.02rem; color: var(--ink-soft); }
.hero-actions { margin-top: 2rem; }

/* Tarjeta "próximo evento destacado" en el hero */
.hero-highlight {
  border: 1px solid var(--line); background: var(--ink); color: var(--cream);
  padding: 1.8rem 1.6rem; max-width: 480px; margin-inline: auto;
}
.hero-highlight-label {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(246,243,236,0.55); margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem;
}
.hero-highlight-label::before { content: ""; width: 7px; height: 7px; background: var(--accent); flex-shrink: 0; }
.hero-highlight-title { font-family: var(--subtitle); font-size: 1.35rem; margin-bottom: .6rem; }
.hero-highlight-meta { font-family: var(--mono); font-size: .8rem; color: rgba(246,243,236,0.7); display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1.2rem; }
.hero-highlight-meta strong { color: var(--cream); font-weight: 500; }
.hero-highlight-empty { color: rgba(246,243,236,0.6); font-size: .92rem; }

/* =============================================================
   7. Marquee ticker
   ============================================================= */
.marquee-wrap { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--navy); color: var(--cream); overflow: hidden; padding-block: .9rem; }
.marquee-track { display: flex; width: max-content; gap: 3rem; animation: marqueeScroll 32s linear infinite; font-family: var(--mono); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.marquee-track span { color: rgba(246,243,236,0.6); }
.marquee-track span.is-accent { color: var(--accent); }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =============================================================
   8. Categorías (sección explicativa)
   ============================================================= */
.grid-12 { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@media (min-width: 720px)  { .grid-12 { grid-template-columns: repeat(3, 1fr); } }
.grid-12 > * { background: var(--bg); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.card { padding: 2rem 1.6rem; display: flex; flex-direction: column; gap: 1rem; transition: background-color .35s var(--ease-out), color .35s var(--ease-out); }
.card-dot { width: 12px; height: 12px; }
.card-title { font-family: var(--subtitle); font-size: 1.15rem; line-height: 1.2; }
.card-text { color: var(--ink-soft); font-size: .94rem; }
@media (hover: hover) and (pointer: fine) {
  .card:hover { background: var(--ink); color: var(--cream); }
  .card:hover .card-text { color: rgba(246,243,236,0.78); }
}

/* =============================================================
   9. Filtros de publicaciones
   ============================================================= */
.blog-filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.2rem; }
.blog-filter {
  border: 1.5px solid var(--ink); padding: .55rem 1.1rem;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .03em; text-transform: uppercase;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out);
}
.blog-filter:hover { background: var(--bg-2); }
.blog-filter.is-active { background: var(--ink); color: var(--cream); }

/* =============================================================
   10. Tarjetas de publicación (grid del blog)
   ============================================================= */
.blog-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 720px)  { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

.blog-card { background: var(--bg); border: 1px solid var(--line); display: flex; flex-direction: column; }
.blog-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.blog-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-soft); }
.blog-card:hover .blog-card-media img { transform: scale(1.06); }
.blog-card-tag {
  position: absolute; top: .8rem; left: .8rem; display: inline-flex; align-items: center; gap: .45rem;
  background: var(--ink); color: var(--cream); font-family: var(--mono); font-size: .7rem;
  letter-spacing: .05em; text-transform: uppercase; padding: .35rem .65rem;
}
.blog-card-tag::before { content: ""; width: 7px; height: 7px; flex-shrink: 0; background: var(--tag-color, var(--accent)); }
.blog-card-body { padding: 1.5rem 1.4rem 1.7rem; display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.blog-card-title { font-family: var(--subtitle); font-size: 1.15rem; line-height: 1.25; }
.blog-card-excerpt { color: var(--ink-soft); font-size: .92rem; flex: 1; }
.blog-card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  font-family: var(--mono); font-size: .74rem; color: var(--ink-mute);
  padding-top: .8rem; border-top: 1px solid var(--line-soft);
}
.blog-card-readmore { margin-top: .3rem; font-family: var(--mono); font-size: .78rem; letter-spacing: .03em; border-bottom: 1px solid var(--line); width: fit-content; transition: color .25s var(--ease-out), border-color .25s var(--ease-out); }
.blog-card:hover .blog-card-readmore { color: var(--accent-dark); border-color: var(--accent-dark); }

.blog-empty { padding: 3rem 1rem; text-align: center; color: var(--ink-mute); font-family: var(--mono); font-size: .9rem; grid-column: 1 / -1; background: var(--bg); }

/* =============================================================
   11. Detalle de publicación
   ============================================================= */
.post-header { padding-top: calc(var(--nav-h) + var(--topbar-h) + 2.5rem); }
.post-back { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .82rem; border-bottom: 1px solid var(--line-soft); width: fit-content; margin-bottom: 1.6rem; transition: color .25s, border-color .25s; }
.post-back:hover { color: var(--accent-dark); border-color: var(--accent-dark); }
.post-tag {
  display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .78rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1rem;
}
.post-tag::before { content: ""; width: 9px; height: 9px; background: var(--tag-color, var(--accent)); flex-shrink: 0; }
.post-title { font-size: clamp(2rem, 5.5vw, 3.4rem); max-width: 24ch; }
.post-meta { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; font-family: var(--mono); font-size: .85rem; color: var(--ink-mute); }
.post-meta strong { color: var(--ink); font-weight: 500; }
.post-cover { margin-top: 2.2rem; border: 1px solid var(--line); aspect-ratio: 16 / 9; overflow: hidden; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; }

.post-eventbox {
  margin-top: 2.2rem; border: 1px solid var(--line); background: var(--bg-2);
  padding: 1.6rem 1.6rem; display: flex; flex-direction: column; gap: 1rem;
}
@media (min-width: 640px) { .post-eventbox { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; } }
.post-eventbox-facts { display: flex; flex-direction: column; gap: .6rem; }
.post-eventbox-fact { display: flex; gap: .6rem; font-size: .92rem; }
.post-eventbox-fact-label { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mute); min-width: 9ch; }

.post-body { margin-top: 2.4rem; max-width: 68ch; }
.post-body p { color: var(--ink-soft); font-size: 1.02rem; }
.post-body p + p { margin-top: 1.1rem; }
.post-body h2, .post-body h3 { margin-top: 2rem; margin-bottom: .8rem; }
.post-body ul { list-style: disc; padding-left: 1.4rem; color: var(--ink-soft); }
.post-body ul li + li { margin-top: .4rem; }
.post-body a { border-bottom: 1px solid var(--line); }
.post-body a:hover { color: var(--accent-dark); border-color: var(--accent-dark); }

.post-more-title { font-family: var(--mono); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1.2rem; }

/* =============================================================
   12. Contacto
   ============================================================= */
.contact-card { border: 1px solid var(--line); background: var(--bg); padding: 2.4rem 2rem; max-width: 760px; }
.contact-card p { color: var(--ink-soft); font-size: 1rem; margin-bottom: 1.6rem; max-width: 62ch; }
.contact-list { display: flex; flex-direction: column; }
.contact-list a { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; font-size: .95rem; padding-block: .9rem; border-top: 1px solid var(--line-soft); transition: color .3s var(--ease-out); }
.contact-list a:first-child { border-top: 0; }
.contact-list a:hover { color: var(--accent-dark); }
.contact-list-label { font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mute); flex: 0 0 auto; min-width: 15ch; }
.contact-list-value { font-family: var(--mono); font-weight: 500; }

/* =============================================================
   13. Footer
   ============================================================= */
.footer { border-top: 1px solid var(--line); background: var(--ink); color: var(--cream); padding-block: 3rem 2rem; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-brand { margin-bottom: .8rem; display: flex; flex-direction: column; }
.footer-brand-logo { width: 150px; height: auto; display: block; }
.footer-tag { color: rgba(246,243,236,0.6); max-width: 34ch; font-size: .92rem; margin-top: .6rem; }
.footer-social { display: flex; gap: .7rem; margin-top: 1.1rem; }
.footer-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid rgba(246,243,236,0.25); border-radius: 50%;
  color: rgba(246,243,236,0.85);
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.footer-social-link svg { width: 18px; height: 18px; }
.footer-social-link:hover { color: var(--cream); background: var(--accent); border-color: var(--accent); }
.footer-social-link.is-pending { opacity: .45; }
.footer-social-link.is-pending:hover { color: rgba(246,243,236,0.85); background: none; border-color: rgba(246,243,236,0.25); cursor: default; }
.footer-back { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.3rem; font-family: var(--mono); font-size: .82rem; color: var(--cream); border-bottom: 1px solid rgba(246,243,236,0.35); width: fit-content; padding-bottom: .2rem; transition: color .3s var(--ease-out), border-color .3s var(--ease-out); }
.footer-back:hover { color: var(--accent); border-color: var(--accent); }
.footer-col h4 { font-family: var(--mono); font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: rgba(246,243,236,0.5); margin-bottom: .9rem; font-weight: 500; }
.footer-col ul { display: flex; flex-direction: column; gap: .6rem; }
.footer-col a, .footer-col span { font-size: .92rem; color: rgba(246,243,236,0.85); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(246,243,236,0.14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; font-family: var(--mono); font-size: .78rem; color: rgba(246,243,236,0.5); }
.footer-bottom a { color: rgba(246,243,236,0.5); transition: color .3s; }
.footer-bottom a:hover { color: var(--accent); }

/* =============================================================
   14. Reveal on scroll
   ============================================================= */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft); }
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* =============================================================
   15. Responsive helpers
   ============================================================= */
@media (max-width: 720px) { .topbar-inner { font-size: .68rem; } }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation-duration: 90s; }
  [data-reveal] { transition-duration: .01ms; }
}