/*
Theme Name: reDISEÑARte Blog
Theme URI: https://xn--redisearte-y9a.es/blog/
Author: reDISEÑARte
Author URI: https://xn--redisearte-y9a.es/
Description: Tema ligero del blog de reDISEÑARte, con el mismo diseño que la web principal. Sin dependencias ni plugins obligatorios.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
License: Propietario
Text Domain: redisenarte
*/

@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inst.woff2) format("woff2")}
:root{
  --bg:#f6f5f8;--surface:#fdfcfe;--tint:#efe8f3;--tint-2:#e6dcec;
  --ink:#1c1620;--ink-2:#574e5d;--line:#e2dbe6;
  --accent:#814997;--accent-ink:#6d3a82;--accent-deep:#4b2359;--on-accent:#fdfcfe;
  --shadow:0 1px 2px rgba(75,35,89,.06),0 18px 40px -20px rgba(75,35,89,.32);
  --r-card:16px;--r-img:12px;
  --f-head:"Helvetica Neue",Helvetica,Arial,"Nimbus Sans",sans-serif;
  --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(16px,4vw,48px);--ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:700;letter-spacing:-.03em;line-height:1.08;margin:0;text-wrap:balance}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:1320px;margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--surface);padding:.6rem 1rem;z-index:100}
.skip:focus{left:16px;top:16px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* botones */
.btn{display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;font:600 1rem/1 var(--f-body);text-decoration:none;border-radius:999px;padding:1rem 1.45rem;border:1.5px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),transform .15s var(--ease)}
.btn:hover{background:var(--ink);color:var(--surface)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}

/* cabecera */
.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.admin-bar .top{top:32px}
.top .wrap{display:flex;align-items:center;gap:2rem;height:68px}
.brand img{width:150px}
.nav{display:flex;gap:1.75rem;margin-left:auto;font-size:.95rem}
.nav a{text-decoration:none;color:var(--ink-2)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]{font-weight:600}
.top .btn{padding:.7rem 1.1rem;font-size:.9rem}
@media (max-width:1000px){.nav{display:none}.top .btn{margin-left:auto}}
@media (max-width:400px){.brand img{width:124px}.top .btn{padding:.6rem .9rem}}

/* portada del blog */
.blog-head{padding-block:clamp(3rem,6vw,5rem) clamp(2rem,4vw,3rem)}
.blog-head h1{font-size:clamp(2.4rem,5vw,4rem)}
.blog-head p{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--ink-2);max-width:56ch;margin-top:1rem}
.cats{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem}
.cats a{text-decoration:none;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:.4rem .9rem;font-size:.9rem;color:var(--ink-2);transition:border-color .2s,color .2s}
.cats a:hover,.cats a[aria-current="page"]{border-color:var(--accent);color:var(--accent-ink)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;padding-bottom:clamp(4rem,8vw,6rem)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:1.6rem;display:flex;flex-direction:column;gap:.7rem;min-width:0;text-decoration:none;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .cat{font-size:.82rem;font-weight:600;color:var(--accent-ink)}
.card h2{font-size:1.35rem;letter-spacing:-.02em}
.card p{color:var(--ink-2);font-size:.95rem}
.card .meta{margin-top:auto;padding-top:.75rem;font-size:.85rem;color:var(--ink-2)}
.card.feature{grid-column:1/-1;background:var(--tint);border-color:var(--tint);padding:clamp(1.75rem,4vw,3rem);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1rem 3rem;align-items:end}
.card.feature h2{font-size:clamp(1.8rem,3.4vw,2.8rem)}
.card.feature p{font-size:1.05rem}
.card.feature .meta{padding-top:0}
@media (max-width:1000px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.posts{grid-template-columns:minmax(0,1fr)}.card.feature{grid-template-columns:minmax(0,1fr)}}
.pagination{display:flex;gap:.5rem;justify-content:center;padding-bottom:4rem}
.pagination a,.pagination span{border:1px solid var(--line);border-radius:999px;padding:.5rem .95rem;text-decoration:none;background:var(--surface)}
.pagination .current{background:var(--ink);color:var(--surface);border-color:var(--ink)}

/* artículo */
.article{padding-block:clamp(2.5rem,5vw,4rem) clamp(3rem,6vw,5rem)}
.crumbs{font-size:.88rem;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:.4rem}
.crumbs a{text-decoration:none;color:var(--ink-2)}
.crumbs a:hover{color:var(--accent-ink)}
.article header{max-width:820px;margin-top:1.5rem}
.article .cat{display:inline-block;font-size:.85rem;font-weight:600;color:var(--accent-ink);text-decoration:none;margin-bottom:.9rem}
.article h1{font-size:clamp(2.1rem,4.4vw,3.6rem);letter-spacing:-.035em}
.article .lede{font-size:clamp(1.1rem,1.5vw,1.25rem);color:var(--ink-2);margin-top:1.25rem;max-width:62ch}
.byline{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line);font-size:.92rem;color:var(--ink-2)}
.byline b{color:var(--ink);font-weight:600}
.content{max-width:70ch;margin-top:clamp(2rem,4vw,3rem);font-size:1.07rem;line-height:1.75}
.content>*+*{margin-top:1.1rem}
.content h2{font-size:clamp(1.5rem,2.4vw,1.9rem);margin-top:2.75rem}
.content h3{font-size:1.22rem;margin-top:2rem}
.content p,.content li{color:#2f2833}
.content ul,.content ol{padding-left:1.3rem}
.content li+li{margin-top:.45rem}
.content li::marker{color:var(--accent)}
.content a{color:var(--accent-ink);text-underline-offset:3px}
.content strong{color:var(--ink)}
.content blockquote{margin:1.5rem 0;padding:1rem 1.25rem;border-left:3px solid var(--accent);background:var(--surface);border-radius:0 12px 12px 0}
.content img{border-radius:var(--r-img)}
.content table{width:100%;border-collapse:collapse;font-size:.95rem;display:block;overflow-x:auto}
.content th,.content td{border-bottom:1px solid var(--line);padding:.6rem .7rem;text-align:left}
.cta-box{max-width:70ch;margin-top:3rem;background:var(--accent);color:var(--on-accent);border-radius:var(--r-card);padding:clamp(1.5rem,4vw,2.5rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem}
.cta-box h2{font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--on-accent)}
.cta-box p{color:#efe3f4;margin-top:.4rem}
.cta-box .btn{background:var(--surface);border-color:var(--surface);color:var(--accent-deep)}
.cta-box .btn:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--on-accent)}
.related{border-top:1px solid var(--line);padding-block:clamp(3rem,6vw,4.5rem)}
.related h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:1.5rem}
.related .posts{padding-bottom:0}

/* 404 */
.notfound{padding-block:clamp(4rem,10vw,8rem)}
.notfound h1{font-size:clamp(2.4rem,5vw,4rem)}
.notfound p{color:var(--ink-2);margin:1rem 0 2rem;max-width:50ch}

/* pie */
.foot{background:var(--tint);padding-block:3rem;font-size:.92rem;color:var(--ink-2)}
.foot .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:2rem}
.foot img{width:140px}
.foot p{margin-top:.9rem;line-height:1.55}
.foot h4{font-size:1rem;letter-spacing:-.01em;color:var(--ink);margin-bottom:.75rem}
.foot nav{display:flex;flex-direction:column;gap:.4rem}
.foot a{text-decoration:none}
.foot a:hover{color:var(--accent-ink)}
@media (max-width:760px){.foot .wrap{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}