/* Blog MECAMAM · contenido del blog. Cabecera, pie, tipografía (Roboto) y colores vienen de la web (Tailwind + mecamam.css).
   Todo va bajo .blog para que el reseteo de Tailwind no pise estos estilos. */
.blog{--grafito:#1F2428;--acero:#E6E9EC;--rojo:#C8102E;--gris:#6B747C;--linea:#343b41;
--cut:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);font-size:17px;line-height:1.7;color:var(--grafito)}
.blog .wrap{max-width:780px;margin:0 auto;padding:0 20px}
.blog .wrap.wide{max-width:1040px}
.blog a{color:var(--rojo);text-decoration:underline;text-underline-offset:2px}
.blog main{padding-top:28px;padding-bottom:56px}

/* Portada del blog */
.blog .hero{background:var(--grafito);color:#fff;padding:48px 0 72px;clip-path:polygon(0 0,100% 0,100% calc(100% - 40px),0 100%)}
.blog .hero h1{color:#fff;margin:0 0 .4em}
.blog .hero p{color:var(--acero);margin:0;max-width:640px;font-size:1.08rem}
.blog .tiles{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:-28px}
.blog .tile h2{font-size:1.25rem;line-height:1.3;margin:.3em 0 .4em;font-weight:700}
.blog .tile h2 a{color:var(--grafito);text-decoration:none}
.blog .tile h2 a:hover{color:var(--rojo)}
.blog .tile p{margin:.3em 0;font-size:.97rem}

/* Entrada */
.blog h1{font-size:2.05rem;line-height:1.2;margin:.3em 0 .5em;font-weight:900}
.blog h2{font-size:1.4rem;line-height:1.3;margin:1.9em 0 .5em;font-weight:700}
.blog h3{font-size:1.15rem;line-height:1.35;margin:1.5em 0 .4em;font-weight:700}
.blog p{margin:1em 0}
.blog .meta{color:var(--gris);font-size:.88rem;margin:.2em 0}
.blog .crumbs{font-size:.88rem;color:var(--gris);margin-bottom:12px}
.blog .crumbs a{color:var(--gris)}
.blog .panel{background:#fff;padding:32px 36px;box-shadow:inset 0 4px 0 var(--rojo);clip-path:var(--cut)}
.blog .post-head h1{margin-top:.2em}
.blog .post-body ul{list-style:disc;padding-left:1.4em;margin:1em 0}
.blog .post-body ol{list-style:decimal;padding-left:1.4em;margin:1em 0}
.blog .post-body li{margin:.35em 0}
.blog .post-body strong{font-weight:700}
.blog .post-body img{display:block;max-width:100%;height:auto;margin:1.2em 0}
.blog .post-body blockquote{margin:1.2em 0;padding:.2em 1em;border-left:4px solid var(--rojo);background:var(--acero)}
.blog .table-wrap{overflow-x:auto;margin:1.2em 0}
.blog table{border-collapse:collapse;width:100%;font-size:.95rem}
.blog th,.blog td{border:1px solid #d3d7db;padding:8px 10px;text-align:left;vertical-align:top}
.blog th{background:var(--grafito);color:#fff;border-color:var(--grafito)}
.blog .cta{margin:2.5em 0 .5em;padding:26px;background:var(--grafito);color:var(--acero);clip-path:var(--cut)}
.blog .cta h2{margin:0 0 .3em;font-size:1.25rem;color:#fff}
.blog .cta p{margin:.4em 0}
.blog a.btn{display:inline-block;padding:.6rem 1.4rem;background:var(--rojo);color:#fff;text-decoration:none;font-weight:700;clip-path:var(--cut)}
.blog a.btn:hover{background:#a50d26}
.blog .related{margin-top:32px}
.blog .related ul{list-style:disc;padding-left:1.4em;margin:.6em 0}
@media (max-width:600px){.blog{font-size:16px}.blog h1{font-size:1.65rem}.blog .panel{padding:22px 18px}}

/* Modo oscuro (mecamam.css ya oscurece fondo de página y .tile) */
@media (prefers-color-scheme:dark){
.blog a{color:#ff8a98}
.blog .panel{background:#242a2f}
.blog .tile h2 a{color:var(--acero)}.blog .tile h2 a:hover{color:#ff8a98}
.blog .meta,.blog .crumbs,.blog .crumbs a{color:#a8b0b7}
.blog .post-body blockquote{background:#2b3238}
.blog th{background:var(--linea);border-color:var(--linea)}
.blog td{border-color:var(--linea)}
.blog .cta{background:#14181b;border:1px solid var(--linea)}
.blog a.btn{color:#fff}
.blog .hero{background:#14181b}
}