/*
Theme Name: ComoSerAutonomo
Theme URI: https://comoserautonomo.com/
Author: Aitor Garcia Ezquerro
Description: Tema a medida de ComoSerAutonomo: guías para autónomos en España. Portada con temas y tarjetas, categorías con cabecera de color y artículos con el diseño original.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: All rights reserved
Text Domain: comoserautonomo
*/

:root{--ink:#10263b;--teal:#0f766e;--teal-d:#0b5a54;--cta:#e8590c;--bg:#f4f7f8;--card:#fff;--line:#dbe3e8;--mut:#587083;--r:12px;--sh:0 1px 3px rgba(16,38,59,.08);--sh2:0 12px 28px rgba(16,38,59,.16)}
@media(prefers-color-scheme:dark){:root:not([data-x]){--ink:#e8eef2;--bg:#0c1822;--card:#142636;--line:#26405a;--mut:#9db2c2;--teal:#2dd4bf;--teal-d:#5eead4;--sh:none;--sh2:0 12px 28px rgba(0,0,0,.5)}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink)}
h1,h2,h3,.logo{font-family:Georgia,"Times New Roman",serif;line-height:1.2;margin:0}
a{color:inherit}button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--cta);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.hidden{display:none!important}
body>header{position:sticky;top:0;z-index:20;background:var(--ink);color:#fff;box-shadow:0 2px 12px rgba(0,0,0,.25)}
@media(prefers-color-scheme:dark){body>header{background:#08111a}}
.bar{display:flex;align-items:center;gap:20px;height:64px}
.logo{font-size:1.4rem;font-weight:700;text-decoration:none;display:flex;align-items:center;gap:8px;color:#fff}
.logo i{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--cta);font-style:normal;font-size:1rem;transition:transform .3s}
.logo:hover i{transform:rotate(-12deg) scale(1.1)}
#nav{display:flex;gap:2px;flex:1;flex-wrap:wrap;justify-content:center}
#nav a{color:#cfdbe4;text-decoration:none;font-size:.82rem;padding:6px 9px;border-radius:8px;transition:.2s}
#nav a:hover,#nav a.on{background:rgba(255,255,255,.12);color:#fff}
.btn{display:inline-block;background:var(--cta);color:#fff;border:0;border-radius:10px;padding:10px 18px;font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{background:#c94a07;transform:translateY(-2px);box-shadow:0 8px 18px rgba(232,89,12,.35)}
.btn.o{background:transparent;color:var(--teal);border:2px solid var(--teal)}.btn.o:hover{background:var(--teal);color:#fff;box-shadow:none}
#burger{display:none;margin-left:auto;background:none;border:0;color:#fff;width:44px;height:44px;border-radius:8px}
#burger span,#burger span:before,#burger span:after{display:block;width:22px;height:2px;background:#fff;margin:auto;position:relative;transition:.25s}
#burger span:before,#burger span:after{content:"";position:absolute;left:0}
#burger span:before{top:-7px}#burger span:after{top:7px}
#burger[aria-expanded=true] span{background:transparent}
#burger[aria-expanded=true] span:before{top:0;transform:rotate(45deg)}
#burger[aria-expanded=true] span:after{top:0;transform:rotate(-45deg)}
@media(max-width:1020px){#burger{display:block}.bar .btn{display:none}
#nav{display:none;position:absolute;top:64px;left:0;right:0;background:#10263b;flex-direction:column;padding:12px 20px 20px;align-items:stretch}
#nav.open{display:flex}#nav a{font-size:1rem;padding:11px 12px;color:#fff}#nav a:hover,#nav a.on{background:rgba(255,255,255,.15);color:#fff}}
main{min-height:70vh;padding-bottom:56px}
.overflow-x-auto{overflow-x:auto}#view-article article{overflow-wrap:anywhere}
.intro{padding:28px 0 8px}.intro h1{font-size:clamp(1.6rem,3.5vw,2.3rem)}.intro p{margin:6px 0 0;color:var(--mut);max-width:62ch}
h2.sec{font-size:1.4rem;margin:30px 0 14px}
.clus{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.cl{border:0;text-align:left;color:#fff;border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:4px;min-height:118px;box-shadow:var(--sh);transition:transform .25s,box-shadow .25s}
.cl:hover{transform:translateY(-5px);box-shadow:var(--sh2)}
.cl b{font-family:Georgia,serif;font-size:1.1rem}.cl small{opacity:.9}.cl .ic{font-size:1.6rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.art{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh);transition:transform .25s,box-shadow .25s}
.art:hover{transform:translateY(-5px);box-shadow:var(--sh2)}
.th{height:130px;display:grid;place-items:center;font-size:3rem;color:#fff;position:relative;overflow:hidden}
.th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tag{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.35);font-size:.72rem;padding:2px 9px;border-radius:99px;font-family:system-ui}
.bd{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.bd h3{font-size:1.05rem}.bd p{margin:0;color:var(--mut);font-size:.9rem;flex:1}
.bd .btn{align-self:flex-start;padding:8px 14px;font-size:.88rem}
.more{text-align:center;margin-top:26px}
.hero{color:#fff;padding:44px 0 40px;margin-bottom:30px}
.hero h1{font-size:clamp(1.8rem,4vw,2.7rem)}.hero p{max-width:60ch;opacity:.92;margin:10px 0 0}
.legal{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,4vw,44px);margin-top:28px;max-width:860px}
.legal h1{font-size:2rem;margin-bottom:6px}.legal h2{font-size:1.2rem;margin:26px 0 8px}.legal p,.legal li{max-width:75ch}
.legal mark{background:#ffe8a3;color:#3d2c00;padding:0 4px;border-radius:4px;font-weight:600}
.legal table{border-collapse:collapse;width:100%;font-size:.9rem;display:block;overflow-x:auto}
.legal th,.legal td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.legal th{background:var(--bg)}
body>footer{background:var(--ink);color:#b7c7d4;padding:36px 0 22px;font-size:.9rem}
@media(prefers-color-scheme:dark){body>footer{background:#08111a}}
.fg{display:grid;grid-template-columns:1.3fr 2fr;gap:30px}
.fl{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px 16px}
footer a{color:#dce6ed;text-decoration:none}footer a:hover{text-decoration:underline;color:#fff}
.fb{border-top:1px solid rgba(255,255,255,.15);margin-top:22px;padding-top:16px;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between}
@media(max-width:760px){.fg{grid-template-columns:1fr}}
.legal p,.legal ul{margin:0 0 1em}.legal ul{list-style:disc;padding-left:1.5em}.legal a{text-decoration:underline}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

.cl{text-decoration:none}
.rel{max-width:48rem;margin:0 auto;padding:0 1.25rem 4rem}.rel h2{font-size:1.5rem;margin-bottom:1rem}
.idx{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;margin-top:6px}.idx h3{font-size:1.05rem;margin-bottom:6px}.idx h3 a{text-decoration:none}.idx ul{display:grid;gap:4px;font-size:.92rem}.idx li a{color:var(--mut);text-decoration:none}.idx li a:hover{color:var(--teal);text-decoration:underline}
.legal{margin-left:auto;margin-right:auto}
.e404{text-align:center;padding:80px 0}
.admin-bar body>header,body.admin-bar>header{top:32px}
@media(max-width:782px){body.admin-bar>header{top:46px}}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.skip-link:focus{clip:auto;clip-path:none;height:auto;width:auto;left:8px;top:8px;z-index:1000;background:#fff;color:#10263b;padding:10px 14px;border-radius:8px}
.alignleft{float:left;margin:0 1.2em 1em 0}.alignright{float:right;margin:0 0 1em 1.2em}.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption{max-width:100%}.wp-caption-text{font-size:.85rem;color:var(--mut)}
.entry-content img{border-radius:12px;margin:1.5rem 0}
.pagi{display:flex;gap:8px;justify-content:center;margin:30px 0}.pagi .page-numbers{padding:8px 13px;border:1px solid var(--line);border-radius:8px;text-decoration:none;background:var(--card)}.pagi .current{background:var(--teal);color:#fff;border-color:var(--teal)}

/* ===== Reset base (equivalente al preflight de Tailwind 3) ===== */
*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;-webkit-tap-highlight-color:transparent}
body{margin:0;line-height:inherit}
hr{height:0;color:inherit;border-top-width:1px}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:700}
a{color:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
small{font-size:80%}
table{text-indent:0;border-color:inherit;border-collapse:collapse}
button,input,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}
button{text-transform:none;-webkit-appearance:button;background-color:transparent;background-image:none}
summary{display:list-item}
blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}
ol,ul,menu{list-style:none;margin:0;padding:0}
button,[role=button]{cursor:pointer}
img,svg,video,iframe{display:block;vertical-align:middle}
img,video{max-width:100%;height:auto}

/* ===== Utilidades usadas en los artículos ===== */
.flex{display:flex}.hidden{display:none}
.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.shrink-0{flex-shrink:0}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-x-3{column-gap:.75rem}.gap-y-1{row-gap:.25rem}
.space-y-1>:not([hidden])~:not([hidden]){margin-top:.25rem}
.space-y-2>:not([hidden])~:not([hidden]){margin-top:.5rem}
.space-y-3>:not([hidden])~:not([hidden]){margin-top:.75rem}
.overflow-x-auto{overflow-x:auto}
.w-5{width:1.25rem}.h-5{height:1.25rem}.w-full{width:100%}.max-w-3xl{max-width:48rem}
.mx-auto{margin-left:auto;margin-right:auto}
.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-8{margin-top:2rem;margin-bottom:2rem}
.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}
.p-4{padding:1rem}.p-5{padding:1.25rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}.pt-8{padding-top:2rem}.pb-16{padding-bottom:4rem}.pl-6{padding-left:1.5rem}
.rounded-xl{border-radius:.75rem}.rounded-r-xl{border-top-right-radius:.75rem;border-bottom-right-radius:.75rem}
.border{border-width:1px}.border-t{border-top-width:1px}.border-l-4{border-left-width:4px}
.border-line{border-color:var(--line)}.border-l-cta{border-left-color:var(--cta)}
.bg-card{background-color:var(--card)}.bg-soft{background-color:var(--bg)}
.list-disc{list-style-type:disc}.list-decimal{list-style-type:decimal}.list-\[circle\]{list-style-type:circle}
.align-top{vertical-align:top}.text-left{text-align:left}
.font-serif{font-family:Georgia,"Times New Roman",serif}
.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-\[1\.0625rem\]{font-size:1.0625rem}
.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.italic{font-style:italic}
.leading-tight{line-height:1.25}.leading-relaxed{line-height:1.625}
.text-brand{color:var(--teal)}.text-ink{color:var(--ink)}.text-mut{color:var(--mut)}
.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}
.accent-brand{accent-color:var(--teal)}.cursor-pointer{cursor:pointer}
.marker\:text-brand ::marker,.marker\:text-brand::marker{color:var(--teal)}
.hover\:text-brand:hover{color:var(--teal)}.hover\:text-cta:hover{color:var(--cta)}.hover\:underline:hover{text-decoration-line:underline}
@media(min-width:768px){
.md\:text-base{font-size:1rem;line-height:1.5rem}
.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}
.md\:text-5xl{font-size:3rem;line-height:1}
}