/* LatinosCPA — Blog. Hoja aislada: no toca styles.css del sitio.
   Tokens tomados de public/styles.css para que el blog se sienta nativo. */

:root{
  --bg:#0a0a0a; --bg-soft:#141619; --card:#17191d; --card-2:#1c1f24;
  --line:#262b30; --line-2:#323940;
  --ink:#f3f6f8; --body:#c4ced4; --muted:#8a97a0;
  --green:#8FD055; --green-dim:#16210f; --green-line:#3f6127;
  --navy:#1F5C7C; --navy-t:#6bb0dc;
  --maxw:1180px; --read:70ch;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body.lcpa-blog{
  margin:0; background:var(--bg); color:var(--body);
  font-family:"Titillium Web",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:17px; line-height:1.72; -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.narrow{max-width:var(--read)}

a{color:var(--navy-t)}
a:focus-visible,button:focus-visible{outline:2px solid var(--green); outline-offset:3px; border-radius:4px}

/* ── migas ── */
.crumbs{font-size:13.5px; color:var(--muted); padding:20px 0 0; margin:0}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0}
.crumbs li::after{content:"›"; margin-left:8px; color:var(--line-2)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--green); text-decoration:underline}
.crumbs [aria-current]{color:var(--body)}

/* ── cabeceras ── */
.post-head{padding:26px 0 8px}
.kick{display:inline-block; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green); background:var(--green-dim);
  border:1px solid var(--green-line); border-radius:99px; padding:5px 13px;
  margin:0 0 16px}
h1{font-size:clamp(30px,5.2vw,46px); line-height:1.1; font-weight:900;
  letter-spacing:-.025em; color:var(--ink); margin:0 0 16px; text-wrap:balance}
.dek{font-size:19px; line-height:1.6; color:var(--body); margin:0; max-width:64ch}
.meta{font-size:13.5px; color:var(--muted); margin:18px 0 0;
  display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center}
.meta .dot{color:var(--line-2)}

/* ── infografía ── */
figure.info{margin:30px 0 34px}
figure.info picture,figure.info img{display:block}
figure.info img{width:100%; height:auto; border-radius:14px;
  border:1px solid var(--line); background:var(--bg-soft)}
figcaption{font-size:13.5px; color:var(--muted); margin-top:11px;
  line-height:1.6; max-width:64ch}

/* ── cuerpo ── */
.post-body{padding-bottom:16px}
.post-body h2{font-size:clamp(23px,3.2vw,30px); line-height:1.22; font-weight:700;
  letter-spacing:-.018em; color:var(--ink); margin:44px 0 14px; text-wrap:balance}
.post-body h3{font-size:19.5px; font-weight:700; color:var(--ink);
  margin:30px 0 10px; letter-spacing:-.01em}
.post-body p{margin:0 0 18px; max-width:var(--read)}
.post-body ul,.post-body ol{margin:0 0 20px; padding-left:22px; max-width:var(--read)}
.post-body li{margin-bottom:9px}
.post-body strong{color:var(--ink); font-weight:600}
.post-body a{text-decoration:underline; text-underline-offset:2px}
.post-body a:hover{color:var(--green)}

/* llamada de atención */
.note{border-left:3px solid var(--green); background:var(--green-dim);
  border-radius:0 11px 11px 0; padding:15px 19px; margin:24px 0; max-width:var(--read)}
.note p{margin:0}
.note.warn{border-left-color:#e8a13a; background:#2b2113}

/* ejemplo */
.example{background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:20px 22px; margin:26px 0; max-width:var(--read)}
.example h3{margin-top:0}
.example p:last-child{margin-bottom:0}

/* pasos */
.steps{list-style:none; counter-reset:s; padding:0; margin:24px 0; max-width:var(--read)}
.steps li{counter-increment:s; position:relative; padding-left:46px; margin-bottom:18px}
.steps li::before{content:counter(s); position:absolute; left:0; top:1px;
  width:30px; height:30px; border-radius:50%; background:var(--green-dim);
  border:1px solid var(--green-line); color:var(--green);
  font-weight:700; font-size:14px; display:flex; align-items:center;
  justify-content:center}

/* ── FAQ ── */
.faq{margin:40px 0 0; max-width:var(--read)}
.faq details{border:1px solid var(--line); border-radius:12px;
  background:var(--card); margin-bottom:11px; overflow:hidden}
.faq summary{cursor:pointer; padding:15px 19px; font-weight:600;
  color:var(--ink); font-size:16.5px; list-style:none; position:relative;
  padding-right:46px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:19px; top:13px;
  color:var(--green); font-size:21px; font-weight:400; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 19px 17px; margin:0; color:var(--body)}

/* ── CTA ── */
.cta{background:linear-gradient(180deg,var(--card),var(--bg-soft));
  border:1px solid var(--green-line); border-radius:16px;
  padding:28px 26px; margin:44px 0 0; max-width:var(--read)}
.cta h2{margin:0 0 10px; font-size:24px}
.cta p{margin:0 0 20px; color:var(--body)}
.btn{display:inline-block; background:var(--green); color:#0a0a0a;
  font-weight:700; font-size:16px; text-decoration:none; padding:13px 26px;
  border-radius:9px; border:1px solid var(--green)}
.btn:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent; color:var(--green)}
.cta-mid{margin:32px 0; padding:16px 19px; background:var(--bg-soft);
  border:1px solid var(--line); border-radius:11px; font-size:15.5px;
  max-width:var(--read)}
.cta-mid p{margin:0}

/* ── anterior / siguiente ── */
.pager{display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin:48px 0 0; padding-top:28px; border-top:1px solid var(--line)}
.pager a{display:block; background:var(--card); border:1px solid var(--line);
  border-radius:13px; padding:16px 18px; text-decoration:none; color:var(--ink)}
.pager a:hover{border-color:var(--green-line); background:var(--card-2)}
.pager .lbl{display:block; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.pager .t{font-weight:600; font-size:15.5px; line-height:1.4}
.pager .next{text-align:right}
.pager .empty{background:transparent; border:0}

/* ── índice ── */
.hero{padding:44px 0 30px; border-bottom:1px solid var(--line)}
.hero h1{margin-bottom:14px}
.hero p{font-size:19px; color:var(--body); margin:0; max-width:62ch}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  padding:36px 0 0; margin:0; list-style:none}
.card{background:var(--card); border:1px solid var(--line);
  border-radius:16px; overflow:hidden; display:flex; flex-direction:column}
.card:hover{border-color:var(--green-line)}
.card img{width:100%; height:auto; display:block; aspect-ratio:1491/1055;
  object-fit:cover; border-bottom:1px solid var(--line); background:var(--bg-soft)}
.card-b{padding:17px 18px 20px; display:flex; flex-direction:column;
  gap:9px; flex:1}
.card .n{font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--green)}
.card h2{margin:0; font-size:19px; line-height:1.3; font-weight:700;
  letter-spacing:-.012em; color:var(--ink); text-wrap:balance}
.card h2 a{color:inherit; text-decoration:none}
.card h2 a:hover{color:var(--green)}
.card p{margin:0; font-size:14.5px; color:var(--body); line-height:1.6; flex:1}
.card .foot{display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:4px; font-size:13.5px}
.card .time{color:var(--muted)}
.card .go{color:var(--green); font-weight:600; text-decoration:none}
.card .go:hover{text-decoration:underline}

/* ── navegación del sitio, replicada ── */
.blognav{border-bottom:1px solid var(--line); background:var(--bg)}
.blognav .in{max-width:var(--maxw); margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.blognav .logo{display:inline-flex; align-items:center; gap:8px;
  font-weight:900; letter-spacing:-.2px; font-size:21px; color:var(--ink);
  text-decoration:none}
.blognav .logo b{color:var(--green); font-weight:900}
.blognav .links{margin-left:auto; display:flex; gap:18px; align-items:center;
  flex-wrap:wrap}
.blognav .links a{color:var(--body); text-decoration:none; font-size:15px}
.blognav .links a:hover{color:var(--green)}

.blogfoot{border-top:1px solid var(--line); margin-top:60px;
  padding:26px 0 40px; font-size:14px; color:var(--muted)}
.blogfoot .in{max-width:var(--maxw); margin:0 auto; padding:0 20px;
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center}
.blogfoot a{color:var(--muted); text-decoration:none}
.blogfoot a:hover{color:var(--green); text-decoration:underline}
.blogfoot .c{margin-left:auto}

/* ── responsive ── */
@media (max-width:1000px){
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  body.lcpa-blog{font-size:16.5px}
  .cards{grid-template-columns:1fr; gap:18px}
  .pager{grid-template-columns:1fr}
  .pager .next{text-align:left}
  .blognav .links{margin-left:0; width:100%; gap:14px}
  .blogfoot .c{margin-left:0; width:100%}
  .cta{padding:22px 20px}
  .btn{display:block; text-align:center}
}