/* wtc-blog.css — Diseño del blog y de los artículos de Work Together Center (Wonder 4, nov-2026).
   Un solo archivo para el listado (blog.html) y los artículos nuevos. Colores de la marca: naranja #e8a030. */
:root{--wtc-acc:#e8a030;--wtc-acc-d:#c9821a;--wtc-ink:#1d2733;--wtc-txt:#3a4552;--wtc-mut:#6b7684;--wtc-line:#ece6da;--wtc-soft:#fbf7ef;--wtc-navy:#16212d}

/* La plantilla fija la 1.ª fila de <main> como barra pegajosa: se deja vacía y sin altura */
main>.row.wtc-first{height:0 !important;min-height:0 !important;padding:0 !important;margin:0 !important;overflow:hidden !important;box-shadow:none !important}

/* ───────────── LISTADO: cabecera ───────────── */
.wtc-blog-hero{position:relative;margin:10px 0 0;padding:64px 24px 58px;text-align:center;color:#fff;border-radius:24px;overflow:hidden;
  background:linear-gradient(120deg,rgba(22,33,45,.92) 0%,rgba(22,33,45,.78) 55%,rgba(232,160,48,.70) 100%),url(/imgblogs/72.jpg) center/cover no-repeat}
.wtc-blog-hero:after{content:"";position:absolute;inset:auto -10% -60% auto;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(232,160,48,.35),transparent 70%)}
.wtc-blog-hero > *{position:relative;z-index:1}
.wtc-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--wtc-acc);background:rgba(232,160,48,.14);border:1px solid rgba(232,160,48,.45);padding:5px 12px;border-radius:999px;margin-bottom:16px}
.wtc-blog-hero h1{color:#fff !important;font-size:clamp(34px,5vw,54px) !important;line-height:1.08 !important;margin:0 0 14px !important;font-weight:700 !important;letter-spacing:-.01em}
.wtc-blog-hero h1 span{color:var(--wtc-acc)}
.wtc-blog-hero p{max-width:720px;margin:0 auto 22px !important;font-size:18px !important;line-height:1.55 !important;color:rgba(255,255,255,.88) !important}
.wtc-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.wtc-chips button{cursor:pointer;font:inherit;font-size:14px !important;font-weight:500;text-transform:none !important;letter-spacing:0 !important;line-height:1.2 !important;height:auto !important;margin:0 !important;color:#fff !important;background:rgba(255,255,255,.10) !important;border:1px solid rgba(255,255,255,.30) !important;border-radius:999px !important;padding:9px 18px !important;transition:.2s;box-shadow:none !important}
.wtc-chips button:hover,.wtc-chips button.on{background:var(--wtc-acc) !important;border-color:var(--wtc-acc) !important}
.wtc-hero-stats{margin-top:22px;font-size:13px;color:rgba(255,255,255,.72)}
.wtc-hero-stats b{color:#fff}

/* barra de búsqueda y filtros en una fila */
#blog-toolbar{background:#fff !important;border:1px solid var(--wtc-line);box-shadow:0 10px 30px rgba(22,33,45,.07);border-radius:16px !important;padding:14px !important;display:grid !important;grid-template-columns:2fr 1fr 1.2fr 1fr;gap:10px !important;margin:-54px 10px 8px !important;position:relative;z-index:2}
#blog-toolbar input,#blog-toolbar select{height:46px;border-radius:10px !important;border:1px solid #e4dfd5 !important;background:#faf9f6 !important;font-size:15px !important;width:100%;margin:0 !important}
#blog-toolbar input{padding-left:40px !important;background:#faf9f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239aa3ad' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 13px center no-repeat !important}
#results-count{margin:10px 12px 18px !important;color:var(--wtc-mut) !important}

/* tarjetas: mismo listado, acabado más actual */
#blog-posts{gap:26px !important}
.blog-card{border-radius:16px !important;border:1px solid var(--wtc-line);box-shadow:0 4px 18px rgba(22,33,45,.06) !important;display:flex;flex-direction:column}
.blog-card > a{display:block;overflow:hidden;position:relative}
.blog-card img{height:210px !important;transition:transform .5s ease}
.blog-card:hover img{transform:scale(1.05)}
.blog-card:hover{transform:translateY(-5px) !important;box-shadow:0 16px 36px rgba(22,33,45,.13) !important}
.blog-card-body{padding:18px 20px 20px !important;display:flex;flex-direction:column;flex:1}
.blog-card-category{background:var(--wtc-soft);border-radius:6px;padding:3px 8px;letter-spacing:.06em}
.blog-card-lang{background:var(--wtc-navy) !important;font-weight:700}
.blog-card h3{font-size:18px !important;line-height:1.35 !important;margin:6px 0 10px !important}
.blog-card h3 a{color:var(--wtc-ink) !important}
.blog-card p{font-size:14px !important;color:var(--wtc-mut) !important}
.blog-card-link{margin-top:auto;display:inline-flex;align-items:center;gap:6px}
@media (max-width:1024px){#blog-toolbar{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.wtc-blog-hero{padding:46px 18px 70px;border-radius:0 0 20px 20px}#blog-toolbar{grid-template-columns:1fr;margin-top:-46px !important}}

/* ───────────── ARTÍCULO ───────────── */
.wtc-progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:9999;background:transparent}
.wtc-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--wtc-acc),#f3c26b);transition:width .1s linear}
.wtc-post-hero{position:relative;color:#fff;text-align:center;padding:70px 24px 150px;overflow:hidden;
  background:linear-gradient(180deg,rgba(22,33,45,.80),rgba(22,33,45,.92)),var(--wtc-img) center/cover no-repeat}
.wtc-post-hero{border-radius:24px;margin-top:10px}
.wtc-post-hero > div{max-width:860px;margin:0 auto;position:relative}
.wtc-crumbs{font-size:13px;color:rgba(255,255,255,.7);margin-bottom:18px}
.wtc-crumbs a{color:rgba(255,255,255,.85) !important;text-decoration:none}
.wtc-crumbs a:hover{color:var(--wtc-acc) !important}
.wtc-post-hero h1{color:#fff !important;font-size:clamp(30px,4.4vw,48px) !important;line-height:1.12 !important;margin:0 0 18px !important;font-weight:700 !important;letter-spacing:-.01em;text-transform:none !important}
.wtc-dek{font-size:19px !important;line-height:1.55 !important;color:rgba(255,255,255,.86) !important;max-width:720px;margin:0 auto 22px !important}
.wtc-meta{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;font-size:14px;color:rgba(255,255,255,.8)}
.wtc-meta span{display:inline-flex;align-items:center;gap:6px}
.wtc-meta svg{width:16px;height:16px;stroke:var(--wtc-acc)}
.wtc-cover{max-width:960px;margin:-110px auto 0 !important;padding:0 20px;position:relative;z-index:2}
.wtc-cover img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:20px;box-shadow:0 24px 60px rgba(22,33,45,.28);display:block}
.wtc-read{max-width:760px;margin:0 auto;padding:40px 22px 10px}
.wtc-quick-answer{background:linear-gradient(135deg,#fff8ec,#fffdf8) !important;border:1px solid #f1dcb4;border-left:5px solid var(--wtc-acc) !important;border-radius:14px !important;padding:22px 24px !important;margin:0 0 30px !important;box-shadow:0 6px 20px rgba(232,160,48,.10)}
.wtc-quick-answer .wtc-qa-t{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--wtc-acc-d);margin:0 0 8px !important}
.wtc-quick-answer p{font-size:17px !important;line-height:1.65 !important;color:var(--wtc-ink) !important;margin:0 !important}
.wtc-toc{background:#fff;border:1px solid var(--wtc-line);border-radius:14px;padding:18px 22px;margin:0 0 34px}
.wtc-toc b{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--wtc-mut);margin-bottom:8px}
.wtc-toc ol{margin:0;padding-left:20px;columns:2;column-gap:28px}
.wtc-toc li{margin:4px 0;font-size:15px;break-inside:avoid}
.wtc-toc a{color:var(--wtc-ink) !important;text-decoration:none;border-bottom:1px dashed #d9cfbd}
.wtc-toc a:hover{color:var(--wtc-acc-d) !important;border-color:var(--wtc-acc)}
.wtc-article{font-size:18px;line-height:1.8;color:var(--wtc-txt)}
.wtc-article p,.wtc-article li{font-size:18px !important;line-height:1.8 !important;color:var(--wtc-txt) !important}
.wtc-article p{margin:0 0 1.2em !important}
.wtc-article h2{position:relative;font-size:28px !important;line-height:1.25 !important;color:var(--wtc-ink) !important;margin:1.9em 0 .7em !important;padding-top:18px;scroll-margin-top:110px;text-transform:none !important}
.wtc-article h2:before{content:"";position:absolute;top:0;left:0;width:48px;height:4px;border-radius:4px;background:var(--wtc-acc)}
.wtc-article h3{font-size:21px !important;color:var(--wtc-ink) !important;margin:1.5em 0 .5em !important;text-transform:none !important}
.wtc-article strong{color:var(--wtc-ink)}
.wtc-article a{color:var(--wtc-acc-d) !important;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.wtc-article a:hover{color:var(--wtc-ink) !important}
.wtc-article ul,.wtc-article ol{margin:0 0 1.4em !important;padding-left:0 !important}
.wtc-article ul li{list-style:none;position:relative;padding-left:28px;margin:.45em 0}
.wtc-article ul li:before{content:"";position:absolute;left:4px;top:.68em;width:9px;height:9px;border-radius:50%;background:var(--wtc-acc);box-shadow:0 0 0 4px rgba(232,160,48,.18)}
.wtc-article ol{counter-reset:p}
.wtc-article ol li{list-style:none;position:relative;padding-left:44px;margin:.7em 0;counter-increment:p}
.wtc-article ol li:before{content:counter(p);position:absolute;left:0;top:.15em;width:30px;height:30px;border-radius:50%;background:var(--wtc-navy);color:#fff;font-size:14px;font-weight:700;display:grid;place-items:center;line-height:1}
.wtc-article em{color:var(--wtc-mut)}
.wtc-article table{width:100%;border-collapse:separate !important;border-spacing:0;margin:22px 0 30px !important;font-size:15px !important;border:1px solid var(--wtc-line);border-radius:14px;overflow:hidden;box-shadow:0 6px 20px rgba(22,33,45,.05)}
.wtc-article th,.wtc-article td{border:0 !important;border-bottom:1px solid var(--wtc-line) !important;padding:12px 14px !important;text-align:left;vertical-align:top;line-height:1.5}
.wtc-article thead th{background:var(--wtc-navy) !important;color:#fff !important;font-weight:600}
.wtc-article tbody tr:nth-child(even){background:#faf8f3}
.wtc-article tbody tr:last-child td{border-bottom:0 !important}
.wtc-article tbody td:first-child{font-weight:600;color:var(--wtc-ink)}
.wtc-faq{margin-top:2.2em}
.wtc-faq details{background:#fff;border:1px solid var(--wtc-line);border-radius:14px;margin:0 0 12px;transition:box-shadow .2s}
.wtc-faq details[open]{box-shadow:0 10px 26px rgba(22,33,45,.08);border-color:#f0d9ad}
.wtc-faq summary{cursor:pointer;list-style:none;padding:18px 54px 18px 20px;font-size:18px;font-weight:600;color:var(--wtc-ink);position:relative;line-height:1.4}
.wtc-faq summary::-webkit-details-marker{display:none}
.wtc-faq summary:after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--wtc-soft);color:var(--wtc-acc-d);font-size:20px;display:grid;place-items:center;transition:.2s}
.wtc-faq details[open] summary:after{content:"–";background:var(--wtc-acc);color:#fff}
.wtc-faq details p{padding:0 20px 18px;margin:0 !important;font-size:17px !important}
.wtc-related{max-width:1080px;margin:30px auto 0;padding:0 22px}
.wtc-related > h2{text-align:center;font-size:26px !important;color:var(--wtc-ink) !important;margin:0 0 20px !important;text-transform:none !important}
.wtc-rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.wtc-rel{display:flex;flex-direction:column;background:#fff;border:1px solid var(--wtc-line);border-radius:16px;overflow:hidden;text-decoration:none !important;color:var(--wtc-ink) !important;transition:.25s;box-shadow:0 4px 16px rgba(22,33,45,.05)}
.wtc-rel:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(22,33,45,.12)}
.wtc-rel img{width:100%;height:170px;object-fit:cover;display:block}
.wtc-rel span{display:block;padding:14px 16px 4px;font-size:17px;font-weight:600;line-height:1.35}
.wtc-rel em{display:block;padding:0 16px 16px;font-style:normal;color:var(--wtc-acc-d);font-size:14px;font-weight:600}
.wtc-cta{max-width:1080px;margin:46px auto 50px;padding:0 20px}
.wtc-cta > div{background:linear-gradient(120deg,var(--wtc-navy),#22344a 60%,#3b3020);border-radius:22px;padding:44px 30px;text-align:center;color:#fff;position:relative;overflow:hidden}
.wtc-cta > div:after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(232,160,48,.45),transparent 70%)}
.wtc-cta h2{text-align:center !important;color:#fff !important;font-size:30px !important;margin:0 0 10px !important;text-transform:none !important}
.wtc-cta p{text-align:center !important;color:rgba(255,255,255,.85) !important;font-size:17px !important;max-width:640px;margin:0 auto 22px !important}
.wtc-cta p a{color:#f3c26b !important}
.wtc-cta .wtc-btn{display:inline-flex;align-items:center;gap:8px;background:var(--wtc-acc);color:#fff !important;font-weight:700;font-size:17px;padding:14px 28px;border-radius:999px;text-decoration:none !important;box-shadow:0 10px 24px rgba(232,160,48,.35);transition:.2s;position:relative;z-index:1}
.wtc-cta .wtc-btn:hover{background:var(--wtc-acc-d);transform:translateY(-2px)}
.wtc-cta small{display:block;margin-top:18px;color:rgba(255,255,255,.62);font-size:13px;position:relative;z-index:1}
@media (max-width:640px){
  .wtc-post-hero{padding:46px 18px 110px}.wtc-dek{font-size:17px !important}.wtc-cover{margin-top:-80px !important}.wtc-cover img{border-radius:14px}
  .wtc-read{padding-top:28px}.wtc-article p,.wtc-article li{font-size:17px !important}.wtc-article h2{font-size:24px !important}
  .wtc-toc ol{columns:1}.wtc-article table{display:block;overflow-x:auto}.wtc-cta h2{font-size:24px !important}}