/* ══════════════════════════════════════════════════════════════════
   BLOG · Arte Pata Imprenta
   Un solo archivo de estilos para TODO el blog. Los artículos que
   escribe la automatización solo traen texto: el diseño vive aquí.
   Si mañana quieres cambiar cómo se ve el blog entero, cambias este
   archivo y cambian los cincuenta artículos a la vez.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --nero:#0D0D0D; --tinta:#15120E; --tinta-2:#4A4740;
  --hueso:#FFFDF5; --hueso-2:#F6F2E4; --carta:#FFFFFF;
  --amarillo:#F7E7A3; --amarillo-vivo:#F2D96B; --ocre:#C9A227;
  --verde-ink:#1E7A4C; --azul:#5F82CC;
  --linea:rgba(21,18,14,.13); --linea-2:rgba(21,18,14,.28);
  --ancho:1180px; --lectura:680px; --radio:6px;
  --sombra:0 1px 2px rgba(21,18,14,.05),0 12px 30px -16px rgba(21,18,14,.35);
  --display:"Montserrat","Arial Black",sans-serif;
  --texto:"Poppins","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--hueso);color:var(--tinta);font-family:var(--texto);
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.02em;margin:0;
  text-wrap:balance;line-height:1.1}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--azul);outline-offset:2px;border-radius:3px}
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 22px}

/* ── banda superior ─────────────────────────────────────────────── */
.banda{background:var(--nero);color:var(--hueso);text-align:center;
  font-family:var(--display);font-size:11.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;padding:9px 0}
.banda a{color:var(--amarillo-vivo);text-decoration:none;border-bottom:1px solid currentColor}

/* ── cabecera ───────────────────────────────────────────────────── */
.head{background:var(--nero);color:var(--amarillo);position:sticky;top:0;z-index:60}
.head-in{max-width:var(--ancho);margin:0 auto;padding:13px 22px;
  display:flex;align-items:center;gap:20px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.logo-txt{font-family:var(--display);font-weight:900;font-size:24px;letter-spacing:-.03em;
  line-height:1;color:#FFFDF5}
.logo-sub{font-family:var(--display);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--amarillo-vivo);margin-left:2px}
.nav{margin-left:auto;display:flex;gap:22px;align-items:center;
  font-size:14px;font-weight:500}
.nav a{color:var(--hueso);text-decoration:none;opacity:.88}
.nav a:hover{opacity:1;color:var(--amarillo-vivo)}
.nav .cta{background:var(--amarillo-vivo);color:var(--nero);font-weight:700;
  padding:9px 17px;border-radius:99px;opacity:1;font-family:var(--display);font-size:13px}
@media(max-width:700px){
  .nav{gap:14px;font-size:13px}
  .nav .oculta-movil{display:none}
}

/* ── portada del blog ───────────────────────────────────────────── */
.blog-hero{padding:56px 0 34px;border-bottom:1px solid var(--linea)}
.eyebrow{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ocre);margin:0 0 12px}
.blog-hero h1{font-size:clamp(34px,5.4vw,56px)}
.blog-hero p{max-width:640px;color:var(--tinta-2);font-size:18px;margin:16px 0 0}

/* ── rejilla de artículos ───────────────────────────────────────── */
.rejilla{display:grid;gap:30px;padding:42px 0 64px;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.post{background:var(--carta);border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;text-decoration:none;display:flex;flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease}
.post:hover{transform:translateY(-3px);box-shadow:var(--sombra)}
.post-img{aspect-ratio:16/10;background:var(--hueso-2);object-fit:cover;object-position:center;width:100%}
.post-cuerpo{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.post-cat{font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ocre);margin-bottom:9px}
.post h2{font-size:21px;margin-bottom:9px}
.post p{margin:0;color:var(--tinta-2);font-size:15px;line-height:1.6}
.post-pie{margin-top:auto;padding-top:16px;font-size:13px;color:var(--tinta-2);
  display:flex;gap:9px;align-items:center}

/* el primero, a lo ancho */
@media(min-width:900px){
  .post.destacado{grid-column:1/-1;flex-direction:row}
  .post.destacado .post-img{width:52%;aspect-ratio:auto;min-height:330px}
  .post.destacado .post-cuerpo{padding:40px 44px;justify-content:center}
  .post.destacado h2{font-size:33px;margin-bottom:14px}
  .post.destacado p{font-size:17px}
}

/* ── el artículo ────────────────────────────────────────────────── */
.art{padding:46px 0 10px}
.art-cab{max-width:var(--lectura);margin:0 auto}
.art-cab h1{font-size:clamp(30px,4.6vw,46px);margin-bottom:18px}
.art-meta{font-size:14px;color:var(--tinta-2);display:flex;gap:10px;
  align-items:center;flex-wrap:wrap}
.art-entradilla{max-width:var(--lectura);margin:26px auto 0;font-size:20px;
  line-height:1.6;color:var(--tinta-2)}
.art-portada{margin:38px auto;max-width:var(--ancho);border-radius:var(--radio);
  overflow:hidden;background:var(--hueso-2)}
.art-portada img{width:100%;aspect-ratio:16/8;object-fit:cover}
/* LA PORTADA SIN FOTO.
   La automatización escribe el texto pero no siempre va a tener una
   imagen decente que poner, y una foto de banco de imágenes de un
   perro que no es de nadie es peor que no poner nada. Así que cuando
   no hay foto se dibuja la chakana con CSS: sale del color que traiga
   el artículo, pesa cero y nunca da 404. Si un día pones la dirección
   de una foto de verdad en la hoja, esta desaparece sola. */
.portada-auto{aspect-ratio:16/8;position:relative;overflow:hidden;
  background:var(--c,#C9A227)}
.portada-auto::before{content:"";position:absolute;inset:0;
  background:linear-gradient(140deg,rgba(255,253,245,.10),rgba(13,13,13,.34))}
.portada-auto i{position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:132px;height:132px;display:block}
/* los tres rectángulos cruzados de la chakana, hechos con sombras */
.portada-auto i::before{content:"";position:absolute;inset:0;
  background:rgba(255,253,245,.17);
  box-shadow:0 0 0 0 transparent,
             -66px 0 0 rgba(255,253,245,.17), 66px 0 0 rgba(255,253,245,.17),
             0 -66px 0 rgba(255,253,245,.17), 0 66px 0 rgba(255,253,245,.17);
  outline:2px solid rgba(255,253,245,.34);outline-offset:0}
/* el hueco del centro: el eje que une las cuatro direcciones */
.portada-auto i::after{content:"";position:absolute;left:50%;top:50%;
  translate:-50% -50%;width:44px;height:44px;border-radius:50%;
  background:var(--nero);box-shadow:0 0 0 7px rgba(242,217,107,.9)}
@media(max-width:700px){ .portada-auto i{width:96px;height:96px}
  .portada-auto i::before{box-shadow:-48px 0 0 rgba(255,253,245,.17),48px 0 0 rgba(255,253,245,.17),0 -48px 0 rgba(255,253,245,.17),0 48px 0 rgba(255,253,245,.17)} }

.art-portada figcaption{font-size:13px;color:var(--tinta-2);padding:10px 4px;text-align:center}

.art-cuerpo{max-width:var(--lectura);margin:0 auto;padding-bottom:20px}
.art-cuerpo h2{font-size:27px;margin:44px 0 14px}
.art-cuerpo h3{font-size:20px;margin:32px 0 10px}
.art-cuerpo p{margin:0 0 20px}
.art-cuerpo ul,.art-cuerpo ol{margin:0 0 22px;padding-left:22px}
.art-cuerpo li{margin-bottom:9px}
.art-cuerpo a{color:var(--verde-ink);text-decoration:underline;text-underline-offset:3px}
.art-cuerpo img{border-radius:var(--radio);margin:28px 0}
.art-cuerpo blockquote{margin:30px 0;padding:4px 0 4px 22px;
  border-left:3px solid var(--amarillo-vivo);font-size:20px;line-height:1.55;
  font-family:var(--display);font-weight:600;letter-spacing:-.01em}
.art-cuerpo strong{font-weight:600}
.art-cuerpo hr{border:0;border-top:1px solid var(--linea);margin:38px 0}

/* la cajita amarilla de «esto es lo que hacemos» */
.nota{background:var(--hueso-2);border-left:3px solid var(--amarillo-vivo);
  border-radius:0 var(--radio) var(--radio) 0;padding:20px 24px;margin:32px 0;font-size:16px}
.nota strong{font-family:var(--display)}

/* ── la llamada del final ───────────────────────────────────────── */
.cierre{max-width:var(--lectura);margin:50px auto 0;background:var(--nero);
  color:var(--hueso);border-radius:var(--radio);padding:38px 36px;text-align:center}
.cierre h3{font-size:25px;color:var(--hueso);margin-bottom:12px}
.cierre p{color:rgba(255,253,245,.78);margin:0 0 22px;font-size:16px}
.btn{display:inline-block;background:var(--amarillo-vivo);color:var(--nero);
  font-family:var(--display);font-weight:700;font-size:15px;text-decoration:none;
  padding:14px 30px;border-radius:99px}
.btn:hover{background:#fff}

/* ── pie ────────────────────────────────────────────────────────── */
.pie{background:var(--nero);color:rgba(255,253,245,.72);margin-top:72px;
  padding:44px 0 34px;font-size:14px}
.pie-in{max-width:var(--ancho);margin:0 auto;padding:0 22px;
  display:flex;gap:34px;flex-wrap:wrap;justify-content:space-between}
.pie a{color:var(--amarillo-vivo);text-decoration:none}
.pie h4{color:var(--hueso);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:11px}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:7px}
.pie-legal{max-width:var(--ancho);margin:30px auto 0;padding:18px 22px 0;
  border-top:1px solid rgba(255,253,245,.14);font-size:12.5px}