/* assets/css/styles.css — Devenga · Dirección A "Editorial de confianza" */

:root{
  --paper:#f7f3ea; --box:#fdfbf6;
  --ink:#262420; --ink-soft:#5c574c; --muted:#8a8272;
  --navy:#17324d; --gold:#b0842a; --gold-bright:#c9a24b;
  --rule:#e2d9c6;
  --measure:68ch;
  /* Oro para TEXTO-enlace: #b0842a solo pasa AA en texto grande; este tono más
     profundo da 4.79:1 sobre papel → AA para texto normal. El oro base queda para
     botón, bordes y acentos. */
  --gold-link:#8a6518;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 20px/1.78 Georgia,'Iowan Old Style','Times New Roman',serif;
}
main{max-width:var(--measure); margin:0 auto; padding:0 20px}
h1{font-size:2.875rem; line-height:1.12; margin:.4em 0 .3em}
h2{font-size:1.875rem; color:var(--navy); margin:1.8em 0 .5em}
a{color:var(--gold)}
img{max-width:100%; height:auto}

/* Enlaces de texto: oro AA, subrayado (afordancia además del color). */
a{color:var(--gold-link); text-underline-offset:2px; transition:color .15s ease}
a:hover{color:var(--gold)}

:focus-visible{outline:3px solid var(--navy); outline-offset:2px; border-radius:2px}

/* ── Nav fija ─────────────────────────────────────────────────────── */
.site-nav{
  position:sticky; top:0; z-index:10;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1.4rem;
  padding:14px 20px; background:var(--paper); border-bottom:1px solid var(--rule);
}
.site-nav a{
  font-family:var(--sans); font-size:.95rem; color:var(--ink); text-decoration:none;
}
.site-nav a:hover{color:var(--gold-link)}
.site-nav .brand{
  margin-right:auto;
  font-family:Georgia,serif; font-size:1.35rem; font-weight:700; color:var(--navy);
}

/* ── Helpers tipográficos ─────────────────────────────────────────── */
.eyebrow{
  font-family:var(--sans); font-size:.78rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.11em; color:var(--gold-link);
  margin:0 0 .5rem;
}
.lede{
  font-size:1.32rem; line-height:1.5; color:var(--ink-soft); margin:.4em 0 1em;
}
.meta{
  font-family:var(--sans); font-size:.9rem; color:var(--ink-soft); margin:.3em 0 0;
}
.breadcrumb{
  font-family:var(--sans); font-size:.85rem; color:var(--ink-soft);
  padding-top:1.4rem; margin-bottom:.4rem;
}
.breadcrumb a{color:var(--gold-link); text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

/* ── Artículo ─────────────────────────────────────────────────────── */
.post{padding-bottom:2rem}
.post-header{margin:1rem 0 2rem}

.post-body{overflow-wrap:break-word}
.post-body p{margin:0 0 1.3em}
.post-body h2,.post-body h3{position:relative}
.post-body h3{font-size:1.32rem; color:var(--navy); margin:1.6em 0 .4em}
.post-body ul,.post-body ol{margin:0 0 1.3em; padding-left:1.4em}
.post-body li{margin:.3em 0}

/* Ancla permalink (#) que inyecta Markdown: tenue y oculta, aparece al enfocar
   o pasar por el encabezado. */
.post-body h2 .anchor,.post-body h3 .anchor{
  color:var(--muted); text-decoration:none;
  margin-left:.35em; font-size:.8em; opacity:0; transition:opacity .15s ease;
}
.post-body h2:hover .anchor,.post-body h3:hover .anchor,
.post-body h2:focus-within .anchor,.post-body h3:focus-within .anchor{opacity:1}

.post-body blockquote{
  margin:1.6em 0; padding:.2em 0 .2em 1.1em;
  border-left:3px solid var(--navy); color:var(--ink-soft); font-style:italic;
}

/* Tabla: envuelta en scroll propio para que el body NUNCA scrollee en horizontal. */
.post-body table{
  display:block; width:max-content; max-width:100%; overflow-x:auto;
  border-collapse:collapse; margin:1.6em 0; font-size:.95rem;
}
.post-body th,.post-body td{
  border-bottom:1px solid var(--rule); padding:.55em .8em; text-align:left;
}
.post-body th{font-family:var(--sans); font-size:.85rem; color:var(--navy)}

.post-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em;
  background:var(--box); border:1px solid var(--rule); border-radius:4px; padding:.1em .35em;
}
.post-body pre{
  background:var(--box); border:1px solid var(--rule); border-radius:6px;
  padding:1em; overflow-x:auto; margin:1.6em 0;
}
.post-body pre code{background:none; border:0; padding:0; font-size:.88rem}

/* ── "En 30 segundos" (TL;DR) ─────────────────────────────────────── */
.tldr{
  background:var(--box); border:1px solid var(--rule); border-left:4px solid var(--navy);
  border-radius:6px; padding:1.1em 1.3em; margin:0 0 2em;
}
.tldr-title{
  font-family:var(--sans); font-size:.8rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.09em; color:var(--gold-link); margin:0 0 .5em;
}
.tldr ul{margin:0; padding-left:1.2em}
.tldr li{margin:.3em 0}

/* ── FAQ ──────────────────────────────────────────────────────────── */
.faq{margin:2.5em 0}
.faq h2{margin-top:0}
.faq details{border-bottom:1px solid var(--rule); padding:.4em 0}
.faq summary{
  cursor:pointer; font-weight:700; color:var(--navy); padding:.4em 0;
  list-style-position:outside;
}
.faq details p{margin:.2em 0 .8em; color:var(--ink-soft)}

/* ── Relacionados ─────────────────────────────────────────────────── */
.related{margin:2.5em 0 0; border-top:1px solid var(--rule); padding-top:1.2em}
.related h2{margin-top:.2em}
.related ul{margin:0; padding-left:1.2em}
.related li{margin:.4em 0}

/* ── Bloque de autor ──────────────────────────────────────────────── */
.author-bio{
  background:var(--box); border:1px solid var(--rule); border-radius:6px;
  padding:1.1em 1.3em; margin:2.5em 0 0; font-family:var(--sans); font-size:.95rem;
  color:var(--ink-soft);
}
.author-bio strong{color:var(--navy)}

/* ── Home ─────────────────────────────────────────────────────────── */
.hero{padding:2.5rem 0 2rem; border-bottom:1px solid var(--rule); margin-bottom:2rem}
.hero h1{margin-top:.2em}
.hero .lede{margin-bottom:0}

.article-list{display:grid; gap:1.4rem; margin:0 0 3rem}
.card{
  background:var(--box); border:1px solid var(--rule); border-left:4px solid var(--gold);
  border-radius:6px; padding:1.2em 1.4em;
  transition:transform .15s ease,box-shadow .15s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(23,50,77,.08)}
.card h2{margin:.1em 0 .3em; font-size:1.4rem}
.card h2 a{color:var(--navy); text-decoration:none}
.card h2 a:hover{text-decoration:underline}
.card p{margin:.2em 0}
.card .meta{margin-top:.6em}

/* ── Newsletter (CTA integrado + landing) ─────────────────────────── */
.newsletter-block{margin:3rem 0}
.newsletter-block h2{margin-top:0}
.newsletter-form{
  background:var(--box); border:1px solid var(--rule); border-left:4px solid var(--navy);
  border-radius:8px; padding:1.4em 1.5em; margin:2.5em 0;
  display:flex; flex-direction:column; gap:.9em;
}
.newsletter-form input[type=email]{
  width:100%; padding:.7em .9em; font:400 1rem/1.4 var(--sans);
  color:var(--ink); background:var(--paper);
  border:1px solid var(--rule); border-radius:6px;
}
.newsletter-form input[type=email]:focus-visible{outline:3px solid var(--navy); outline-offset:1px}
.newsletter-form button{
  align-self:flex-start;
  background:var(--navy); color:var(--paper); border:0; border-radius:6px;
  font:600 1rem var(--sans); padding:.75em 1.6em; cursor:pointer;
  transition:background .15s ease;
}
.newsletter-form button:hover{background:#20456b}
/* Honeypot: fuera de pantalla, invisible para humanos, cebo para bots. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.consent{
  display:flex; gap:.6em; align-items:flex-start;
  font-family:var(--sans); font-size:.88rem; color:var(--ink-soft); line-height:1.4;
}
.consent input[type=checkbox]{margin-top:.2em; flex:none; accent-color:var(--navy)}
.consent a{color:var(--gold-link)}

/* ── Footer ───────────────────────────────────────────────────────── */
.site-footer{
  max-width:var(--measure); margin:4rem auto 0; padding:1.6rem 20px 2.5rem;
  border-top:1px solid var(--rule);
  font-family:var(--sans); font-size:.85rem; color:var(--ink-soft); text-align:center;
}
.site-footer p{margin:.4em 0}
.site-footer a{color:var(--gold-link)}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width:640px){
  body{font-size:18px}
  h1{font-size:2rem}
  h2{font-size:1.5rem}
  .lede{font-size:1.15rem}
  .hero{padding:1.6rem 0 1.4rem}
}

/* prefers-reduced-motion: anula toda animación/transición (guard CSS; el sitio
   no lleva JS de cliente, así que no hay efectos por script que apagar). */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}