/*
Theme Name: Websarrolladores
Author: Fran Paredes
Description: Tema propio para cursos, capítulos y artículos de diseño y desarrollo web y móvil.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: websarrolladores
*/
:root{--ink:#152b40;--muted:#536879;--blue:#155acb;--teal:#087d76;--line:#dce5ed;--paper:#f3f7fb;--radius:12px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;color:var(--ink);background:#fff;font:17px/1.75 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-wrap:break-word}a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:4px}a:hover{color:var(--teal)}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--teal);outline-offset:4px}button,input{font:inherit}button,.button,input[type=submit]{cursor:pointer}img,video,iframe{max-width:100%}img{height:auto}figure{margin:1.5em 0}.container{width:min(1180px,calc(100% - 48px));margin-inline:auto}.site-main{min-height:65vh}.section{padding-block:64px}h1,h2,h3{line-height:1.2;letter-spacing:-.035em}h1{font-size:clamp(2rem,4vw,3.5rem);margin:12px 0 26px}h2{font-size:clamp(1.6rem,3vw,2.25rem)}h3{font-size:1.35rem}p{margin:0 0 1.15em}.eyebrow{font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;font-weight:750;color:var(--teal);margin:0 0 12px}.site-header{background:#fff;border-bottom:1px solid var(--line)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-block:25px}.brand{font-size:clamp(1.1rem,2vw,1.45rem);font-weight:800;text-decoration:none;color:var(--ink);letter-spacing:-.05em}.brand-icon{color:var(--blue);margin-right:5px}.branding p{font-size:.73rem;letter-spacing:.025em;color:var(--muted);margin:2px 0 0}.custom-logo{max-height:64px;width:auto}.menu,.primary-nav ul,.site-footer ul{list-style:none;padding:0;margin:0;display:flex;gap:22px;flex-wrap:wrap}.primary-nav a{font-size:.88rem;font-weight:650;text-decoration:none;color:var(--ink)}.primary-nav .current-menu-item>a{color:var(--blue)}.primary-nav .sub-menu{display:block;padding:6px 0 0 12px;border-left:2px solid var(--line);margin-top:4px}.primary-nav .sub-menu a{font-size:.8rem}.menu-toggle{background:white;border:1px solid var(--line);border-radius:6px;padding:8px 12px;color:var(--ink)}.search-bar{background:var(--paper);border-top:1px solid var(--line);padding:9px 0}.search-bar .container{display:flex;justify-content:flex-end}.search-form{display:flex;gap:8px;align-items:center;max-width:100%}.search-form label{min-width:0}.search-field{width:100%;max-width:280px;padding:7px 12px;border:1px solid #afbfcd;border-radius:5px;background:white;font-size:.85rem}.search-submit{padding:7px 14px;background:var(--ink);border:1px solid var(--ink);border-radius:5px;color:white;font-size:.85rem}.hero{background:linear-gradient(115deg,#f3f7fd 0%,#f5fbf9 100%);border-bottom:1px solid var(--line);padding:82px 0}.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:65px;align-items:center}.hero h1{font-size:clamp(2.5rem,4.5vw,3.8rem);line-height:1.1}.hero h1 span{color:var(--blue)}.hero-intro{color:var(--muted);max-width:490px;font-size:1.1rem}.button{display:inline-flex;align-items:center;gap:25px;background:var(--blue);color:white;padding:12px 22px;border-radius:6px;text-decoration:none;font-weight:700}.button:hover{background:#1049a8;color:white}.hero-note{font-size:.8rem;color:var(--muted);margin:17px 0 0}.code-window{background:#13263a;color:#75ded0;border:1px solid #284054;border-radius:var(--radius);box-shadow:0 18px 42px #142b401a;overflow:hidden;min-width:0;transform:rotate(1deg)}.window-bar{display:flex;justify-content:space-between;gap:8px;padding:13px 18px;background:#1c3349;font-size:.7rem;color:#b6c8da}.window-bar>span:first-child{color:#6fc9bd;letter-spacing:3px}.code-window pre{font-size:clamp(.72rem,1.1vw,.88rem);padding:24px;margin:0;line-height:1.9;overflow:auto}.code-light{color:#edf4fa}.code-muted{color:#9eb5cc}.code-caption{border-top:1px solid #284054;padding:13px 18px;font-size:.7rem;color:#bccfdf}.code-caption span{color:#75ded0;margin-right:7px}.section-heading{margin-bottom:30px}.section-heading h2{margin:0 0 12px}.section-heading>p:last-child{color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}.card> a{display:block}.card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.card-body,.course-card{padding:28px}.card h2{font-size:1.4rem;margin:0 0 16px}.card h2 a,.card h3 a{text-decoration:none;color:var(--ink)}.card p{color:var(--muted);font-size:.92rem}.card .eyebrow{font-size:.7rem;color:var(--teal)}.card .read-more{font-size:.86rem;font-weight:700;text-decoration:none}.course-symbol{font:bold 1.5rem/1 monospace!important;color:var(--blue)!important;background:#edf3ff;width:60px;padding:15px 6px;border-radius:8px;text-align:center}.course-card h3{margin:0 0 15px}.articles-band{background:var(--paper);border-block:1px solid var(--line)}.empty-state{padding:30px;background:var(--paper);border:1px dashed #b8c9d8;border-radius:var(--radius)}.empty-state h3{margin-top:0}.reading{max-width:800px;margin-inline:auto;min-width:0}.reading-layout.with-sidebar{display:grid;grid-template-columns:minmax(0,800px) minmax(220px,1fr);gap:60px}.with-sidebar .reading{width:100%}.entry-content{font-size:1.06rem}.entry-content h2{margin:2em 0 .7em}.entry-content h3{margin:1.7em 0 .7em}.entry-content li{margin-bottom:.5em}.entry-content pre{background:#13263a;color:#e7f1fa;padding:24px;border-radius:8px;overflow:auto;line-height:1.7;font-size:.9rem}.entry-content :not(pre)>code{background:#edf3f9;padding:2px 5px;border-radius:4px;font-size:.9em;overflow-wrap:anywhere}.entry-content blockquote{border-left:4px solid var(--teal);background:#f0f8f7;padding:20px 26px;margin:28px 0}.entry-content table{width:100%;border-collapse:collapse}.entry-content th,.entry-content td{padding:12px;border:1px solid var(--line);text-align:left}.wp-block-table{overflow:auto}.featured-image{border-radius:10px;margin-bottom:25px}.post-meta{color:var(--muted);font-size:.85rem;margin:0 0 24px}.course-sidebar{padding:25px;background:var(--paper);border:1px solid var(--line);border-radius:10px;align-self:start}.course-sidebar h2{font-size:1.1rem;margin:0 0 18px}.course-sidebar ol{padding-left:20px;font-size:.85rem}.course-sidebar li{margin-bottom:12px}.course-sidebar a{text-decoration:none;color:var(--muted)}.course-sidebar a[aria-current]{font-weight:750;color:var(--blue)}.lesson-nav{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:40px;padding-top:24px;font-size:.88rem}.lesson-nav a{flex:1;min-width:130px}.lesson-list{padding:0;list-style-position:inside;counter-reset:lessons}.lesson-list li{display:flex;counter-increment:lessons;border-bottom:1px solid var(--line);align-items:baseline;gap:18px;padding:17px 0}.lesson-list li:before{content:counter(lessons,decimal-leading-zero);color:var(--teal);font-weight:700;font-size:.8rem}.lesson-list a{display:flex;justify-content:space-between;gap:20px;width:100%;text-decoration:none;font-weight:600}.syllabus{margin-top:45px}.site-footer{padding:42px 0;background:#102438;color:#e3edf5}.footer-inner{display:flex;justify-content:space-between;gap:30px}.site-footer p,.site-footer small{color:#afc3d5;font-size:.82rem}.site-footer ul{gap:18px}.site-footer a{font-size:.8rem;color:#e3edf5}.screen-reader-text,.skip-link:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip-link:focus{position:fixed;top:12px;left:12px;background:white;padding:12px;z-index:99999}.navigation{margin-top:30px}.nav-links{display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap}.alignwide{max-width:100%}.wp-caption-text{font-size:.85rem;color:var(--muted)}
@media(min-width:901px){.menu-toggle{display:none}}@media(max-width:1000px){.header-inner{gap:18px}.primary-nav ul{gap:14px}.hero-grid{gap:35px}.reading-layout.with-sidebar{gap:30px}}@media(max-width:900px){.header-inner{flex-wrap:wrap}.primary-nav{width:100%}.primary-nav.menu-ready{display:none}.primary-nav.menu-ready.is-open{display:block}.primary-nav ul{flex-direction:column;gap:0}.primary-nav a{display:block;padding:10px 0}.primary-nav .sub-menu{padding-left:20px}.hero-grid{grid-template-columns:1fr;gap:40px}.hero{padding:50px 0}.hero-intro{max-width:650px}.code-window{transform:none;max-width:650px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.reading-layout.with-sidebar{grid-template-columns:1fr}.course-sidebar{margin-top:10px}}@media(max-width:600px){.container{width:calc(100% - 32px)}.header-inner{gap:12px;padding-block:18px}.branding{min-width:0;flex:1}.brand{font-size:1.08rem}.brand-icon{display:none}.branding p{font-size:.66rem}.menu-toggle{font-size:.8rem}.section{padding-block:40px}.cards{grid-template-columns:1fr}.footer-inner{flex-direction:column}.code-window pre{padding:16px}.code-caption{font-size:.65rem}.hero h1{font-size:2.6rem}.entry-content{font-size:1rem}.search-bar .container{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Opciones del personalizador */
body{background:var(--background,#fff);font-family:var(--font,system-ui,sans-serif);font-size:var(--body_size,17px);line-height:var(--leading,1.75)}
h1,h2,h3,h4,h5,h6{font-family:var(--heading-font,system-ui,sans-serif)}h1{font-size:clamp(2rem,4vw,var(--heading_size,56px))}.hero h1{font-size:clamp(2.3rem,4.5vw,var(--heading_size,56px))}.container{width:min(var(--container,1180px),calc(100% - 48px))}.section{padding-block:var(--space,64px)}.reading{max-width:var(--reading,800px)}.reading-layout.with-sidebar{grid-template-columns:minmax(0,var(--reading,800px)) minmax(220px,1fr)}.header-inner{padding-block:var(--header_padding,25px)}.site-header{background:var(--header_bg,#fff)}.custom-logo{max-width:var(--logo_width,240px);max-height:100px}.button{color:var(--button_text,#fff)}.button:hover{background:var(--teal);color:var(--button_text,#fff)}.cards{grid-template-columns:repeat(var(--columns,3),minmax(0,1fr))}.card{background:var(--background,#fff)}.site-footer{background:var(--footer_bg,#102438);color:var(--footer_text,#e3edf5)}.site-footer p,.site-footer small,.site-footer a{color:var(--footer_text,#e3edf5)}.hero{background:var(--paper)}.entry-content{font-size:1em}.hero-intro{font-size:1.1em}.header-centered .header-inner{flex-direction:column;gap:15px;text-align:center}.header-centered .primary-nav>ul{justify-content:center}.sticky-header .site-header{position:sticky;top:0;z-index:100}.admin-bar.sticky-header .site-header{top:32px}.layout-boxed{max-width:calc(var(--container,1180px) + 80px);margin:auto;box-shadow:0 0 30px #142b401a}.hero-no-code .hero-grid{grid-template-columns:1fr}.hero-no-code .hero-intro{max-width:750px}.footer-widgets{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px;border-bottom:1px solid var(--line);padding-bottom:25px;margin-bottom:25px}.webs-widget{min-width:0}.widget-title{font-size:1.15rem}.webs-widget ul{padding-left:18px}.social-links{margin:15px 0!important}.entry-content a:hover{text-decoration-thickness:2px}
@media(max-width:1000px){.cards{grid-template-columns:repeat(min(var(--columns,3),2),minmax(0,1fr))}}@media(max-width:900px){.reading-layout.with-sidebar{grid-template-columns:1fr}.header-centered .header-inner{flex-direction:row;text-align:left}.header-centered .primary-nav{text-align:left}.sticky-header .site-header{position:static}.container{width:calc(100% - 40px)}.section{padding-block:clamp(24px,6vw,var(--space,64px))}}@media(max-width:600px){.cards{grid-template-columns:1fr}.container{width:calc(100% - 32px)}.custom-logo{max-width:min(var(--logo_width,240px),60vw)}.hero h1{font-size:clamp(2rem,9vw,var(--heading_size,56px))}}

/* 1.2: identity, real logo widths and secondary navigation */
.header-inner{flex-wrap:wrap;gap:22px}.branding{display:flex;align-items:center;gap:18px;min-width:0;max-width:100%;flex:1 1 330px;text-align:left}.brand-copy{min-width:0;flex:1 1 auto}.brand{display:inline-block;font-size:clamp(1.1rem,2.2vw,1.65rem);line-height:1.25;overflow-wrap:anywhere}.branding .site-description{font-size:.82rem;line-height:1.55;margin:6px 0 0;letter-spacing:0;overflow-wrap:anywhere}.site-logo{flex:0 0 auto;min-width:0}.site-logo .custom-logo-link,.site-logo .custom-logo{display:block;width:var(--logo_width,120px);max-width:100%;height:auto;max-height:none}.site-logo .custom-logo-link{max-width:min(var(--logo_width,120px),32vw)}.primary-nav{flex:0 1 auto;max-width:100%;min-width:0}.primary-nav>ul{justify-content:flex-end;row-gap:6px}.primary-nav a{overflow-wrap:anywhere}.menu-toggle{flex-shrink:0;min-height:44px}.utility-bar{background:var(--paper);border-top:1px solid var(--line);padding:10px 0}.utility-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 28px}.secondary-nav{min-width:0;max-width:100%;flex:1 1 240px}.secondary-menu{display:flex;align-items:center;gap:4px 20px;list-style:none;margin:0;padding:0;flex-wrap:wrap}.secondary-menu li{min-width:0;max-width:100%}.secondary-menu a{display:flex;align-items:center;gap:7px;min-height:44px;color:var(--ink);text-decoration:none;font-size:.83rem;font-weight:600;overflow-wrap:anywhere}.secondary-menu a:hover{color:var(--blue)}.social-icon{width:18px;height:18px;flex:0 0 18px}.social-label{min-width:0}.header-search{flex:0 1 340px;min-width:0;max-width:100%;margin-left:auto}.header-search .search-form{width:100%}.header-search .search-form label{flex:1}.header-search .search-field{width:100%;max-width:none;min-height:44px}.header-search .search-submit{min-height:44px;flex-shrink:0}.header-centered .header-inner{flex-direction:column;text-align:center}.header-centered .branding{flex:0 1 auto;justify-content:center;text-align:left}.header-centered .primary-nav{width:100%}.header-centered .primary-nav>ul{justify-content:center}.header-centered .menu-toggle{align-self:flex-end}
@media(min-width:1101px){.menu-toggle{display:none!important}.primary-nav.menu-ready{display:block!important}}
@media(max-width:1100px){.header-inner,.header-centered .header-inner{flex-direction:row;gap:14px;align-items:center}.header-centered .branding{flex:1 1 0;justify-content:flex-start}.branding{flex:1 1 0;gap:12px}.primary-nav,.header-centered .primary-nav{flex:0 0 100%;width:100%;text-align:left}.primary-nav.menu-ready{display:none}.primary-nav.menu-ready.is-open{display:block}.primary-nav ul,.header-centered .primary-nav ul{flex-direction:column;gap:0;align-items:stretch}.primary-nav a{display:block;padding:10px 0;min-height:44px}.primary-nav .sub-menu{padding:0 0 0 18px;margin:0}.menu-toggle:not([hidden]){display:block}.sticky-header .site-header{position:static}}
@media(max-width:600px){.site-logo .custom-logo-link{width:var(--logo_mobile_width,72px);max-width:28vw}.site-logo .custom-logo{width:100%;max-width:100%;max-height:none}.branding{gap:10px}.branding .brand{font-size:clamp(.9rem,4vw,1.15rem)}.branding .site-description{font-size:.72rem;line-height:1.4;margin-top:4px}.menu-toggle{padding:7px 9px}.header-inner{padding-block:min(var(--header_padding,25px),20px)}.utility-inner{flex-direction:column;align-items:stretch;gap:8px}.secondary-nav{flex:0 1 auto}.secondary-menu{justify-content:center;gap:0 16px}.header-search{width:100%;flex:0 1 auto;margin:0}.header-search .search-form{gap:8px}.secondary-menu a{font-size:.8rem}}