/* Contenido del sitio (layout Jekyll y home): tipografía, tarjetas de proyecto, artículo, hubs.
   Basado en el template Gerous. Se aplica solo con <body class="sg-site">. Requiere chrome.css. */
body.sg-site{margin:0;font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:18px;line-height:1.6;letter-spacing:-.18px;color:var(--sg-text);background:var(--sg-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
.sg-site *,.sg-site *::before,.sg-site *::after{box-sizing:border-box}
@media (max-width:768px){body.sg-site{font-size:16px}}
.sg-site ::selection{background:var(--sg-primary);color:var(--sg-on-primary)}
.sg-site h1,.sg-site h2,.sg-site h3,.sg-site h4{margin:0 0 24px;font-weight:700;line-height:1.3;letter-spacing:-.6px;color:var(--sg-heading)}
.sg-site a{color:var(--sg-heading);text-decoration:none}
.sg-site img{max-width:100%;height:auto;vertical-align:middle}

.sg-container{width:100%;max-width:1332px;margin:0 auto;padding:0 32px}
.sg-narrow{max-width:844px}
@media (max-width:576px){.sg-container{padding:0 20px}}
.sg-main{display:block;padding-bottom:40px}

/* ---- Botones y enlaces en píldora ---- */
.sg-site .sg-btn--ghost{color:var(--sg-heading) !important;background:var(--sg-bg-alt)}
.sg-site .sg-btn--ghost:hover{color:var(--sg-heading) !important;background:var(--sg-bg-alt-2)}
.sg-site .sg-btn--primary{color:var(--sg-on-primary) !important;background:var(--sg-primary)}
.sg-site .sg-btn--primary:hover{color:var(--sg-on-primary) !important;background:var(--sg-primary);filter:brightness(.92)}
.sg-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:60px;font-size:16px;font-weight:500;line-height:1.4;background:var(--sg-bg-alt);transition:background .2s}
.sg-pill:hover{background:var(--sg-bg-alt-2)}

/* ---- Cabeceras de sección ---- */
.sg-section{margin-bottom:120px}
@media (max-width:768px){.sg-section{margin-bottom:96px}}
@media (max-width:576px){.sg-section{margin-bottom:80px}}
.sg-section__head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:32px}
.sg-section__intro{display:block;margin-bottom:12px;font-size:14px;font-weight:500;letter-spacing:1.8px;text-transform:uppercase;color:var(--sg-text-alt)}
.sg-section__title{margin:0;font-size:32px}
.sg-section__desc{max-width:580px;margin:16px 0 0;color:var(--sg-text-alt)}
@media (max-width:576px){.sg-section__title{font-size:24px}}

/* ---- Hero de la home ---- */
.sg-hero{margin:64px 0 96px;text-align:center}
.sg-hero__inner{max-width:1078px;margin:0 auto}
.sg-site .sg-hero__title{margin-bottom:24px;font-size:80px;line-height:1;letter-spacing:-2px}
.sg-hero__desc{max-width:768px;margin:0 auto;font-size:18px;line-height:1.5;color:var(--sg-text-alt)}
.sg-hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px}
@media (max-width:1024px){.sg-site .sg-hero__title{font-size:64px}}
@media (max-width:768px){.sg-hero{margin:48px 0 80px}.sg-site .sg-hero__title{font-size:42px;letter-spacing:-1px}.sg-hero__desc{font-size:inherit}}
@media (max-width:576px){.sg-hero{margin:32px 0 72px}.sg-site .sg-hero__title{font-size:32px}}
/* ---- Rejilla y tarjetas de proyecto ---- */
.sg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px;list-style:none;margin:0;padding:0}
.sg-grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1024px){.sg-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.sg-grid,.sg-grid--2{grid-template-columns:1fr}}

/* Tonos de la zona visual de cada tarjeta (sin imágenes: degradado + número) */
.sg-tone-0,.sg-tone-1,.sg-tone-2,.sg-tone-3,.sg-tone-4,.sg-tone-5{--tone-a:#fbd5e4;--tone-b:#d14984}
.sg-tone-1{--tone-a:#d6e4ff;--tone-b:#8fb2ff}
.sg-tone-2{--tone-a:#ffe3d6;--tone-b:#ff9a76}
.sg-tone-3{--tone-a:#fff0c2;--tone-b:#ffcf5c}
.sg-tone-4{--tone-a:#e6dcff;--tone-b:#b9a2ff}
.sg-tone-5{--tone-a:#d3f3ee;--tone-b:#7fdacb}
:root[dark] .sg-tone-0,:root[dark] .sg-tone-1,:root[dark] .sg-tone-2,:root[dark] .sg-tone-3,:root[dark] .sg-tone-4,:root[dark] .sg-tone-5{--tone-a:#34363a;--tone-b:#d14984}
:root[dark] .sg-tone-1{--tone-b:#5b7be0}
:root[dark] .sg-tone-2{--tone-b:#d1673f}
:root[dark] .sg-tone-3{--tone-b:#b8862a}
:root[dark] .sg-tone-4{--tone-b:#7c5fd1}
:root[dark] .sg-tone-5{--tone-b:#2f9c8c}

.sg-card{display:flex;flex-direction:column;position:relative;color:inherit}
.sg-card__media,.sg-site .hub-card::before{display:flex;align-items:flex-end;justify-content:space-between;position:relative;width:100%;aspect-ratio:4/3;padding:22px 24px;border-radius:22px;overflow:hidden;background:linear-gradient(135deg,var(--tone-a),var(--tone-b));transition:transform .3s ease}
.sg-card__media::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.45) 2px,transparent 2px);background-size:15px 15px;pointer-events:none}
.sg-card__num{position:relative;z-index:1;font-size:72px;font-weight:700;line-height:.9;letter-spacing:-3px;color:rgba(3,7,17,.78)}
:root[dark] .sg-card__num{color:rgba(255,255,255,.85)}
.sg-card__tag{position:relative;z-index:1;padding:5px 12px;border-radius:60px;font-size:12px;font-weight:500;background:var(--sg-bg);color:var(--sg-heading)}
a.sg-card:hover .sg-card__media{transform:translateY(-6px)}
.sg-card__info{margin-top:16px}
.sg-card__label{margin:0 0 4px;font-size:16px;line-height:24px;font-weight:500;color:var(--sg-text-alt)}
.sg-card__title{display:inline;margin:0;font-size:24px;line-height:1.3;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-decoration-color .2s}
a.sg-card:hover .sg-card__title{text-decoration-color:var(--sg-heading)}
.sg-card__desc{margin:8px 0 0;font-size:16px;color:var(--sg-text-alt)}
@media (max-width:768px){.sg-card__media,.sg-site .hub-card::before{border-radius:16px}}

/* ---- Tarjetas de artículo ---- */
.sg-article{display:flex;flex-direction:column;padding:28px;border-radius:22px;background:var(--sg-bg-alt);transition:transform .3s ease}
a.sg-article:hover{transform:translateY(-6px)}
.sg-article__meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px;font-weight:500;text-transform:uppercase;color:var(--sg-text-alt)}
.sg-tag{display:inline-block;padding:6px 16px;border-radius:60px;font-size:12px;font-weight:500;line-height:1.3;text-transform:capitalize;color:var(--sg-heading);background:var(--sg-bg-alt);transition:background .2s}
.sg-site a.sg-tag:hover{background:var(--sg-bg-alt-2)}
.sg-article .sg-tag{background:var(--sg-bg)}
.sg-article__title{margin:14px 0 8px;font-size:24px;line-height:1.35}
.sg-article__excerpt{display:-webkit-box;margin:0 0 16px;font-size:16px;color:var(--sg-text-alt);overflow:hidden;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.sg-article__more{margin-top:auto;font-size:15px;font-weight:600;color:var(--sg-heading)}

/* ---- Bloque «Hoy» de la home ---- */
.sg-today{display:grid;grid-template-columns:1fr auto;gap:24px 40px;align-items:center;padding:40px;border-radius:22px;background:var(--sg-bg-alt)}
.sg-today[hidden]{display:none}
.sg-today__date{margin:0 0 8px;font-size:14px;font-weight:500;letter-spacing:1.8px;text-transform:uppercase;color:var(--sg-text-alt)}
.sg-today__title{margin:0 0 12px;font-size:28px}
.sg-today__topics{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.sg-today__topics li{margin:0;padding:5px 14px;border-radius:60px;font-size:13px;font-weight:500;background:var(--sg-bg);color:var(--sg-heading)}
.sg-today__actions{display:flex;flex-direction:column;gap:10px}
@media (max-width:768px){.sg-today{grid-template-columns:1fr;padding:28px}.sg-today__title{font-size:22px}}

/* ---- Banda final (CTA) ---- */
.sg-cta{position:relative;padding:96px 32px;border-radius:22px;overflow:hidden;text-align:center;background:var(--sg-dark)}
.sg-cta::before,.sg-cta::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;border:50px solid var(--sg-primary);opacity:.22}
.sg-cta::before{top:-130px;left:-130px}
.sg-cta::after{right:-130px;bottom:-130px}
.sg-cta__content{position:relative;z-index:1;max-width:620px;margin:0 auto}
.sg-site .sg-cta__title{margin-bottom:20px;font-size:40px;line-height:1.1;color:#fff}
.sg-cta__desc{margin:0 0 32px;font-size:16px;color:#fff;opacity:.8}
.sg-cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.sg-site .sg-cta .sg-btn--ghost{color:#fff !important;background:rgba(255,255,255,.14)}
.sg-site .sg-cta .sg-btn--ghost:hover{background:rgba(255,255,255,.24)}
@media (max-width:768px){.sg-cta{padding:64px 24px}}
@media (max-width:576px){.sg-cta{padding:40px 20px}.sg-site .sg-cta__title{font-size:28px}}

/* ---- Migas de pan ---- */
.sg-crumbs{display:flex;flex-wrap:wrap;gap:4px 8px;margin:40px 0 20px;font-size:13px;color:var(--sg-text-alt)}
.sg-crumbs a{color:var(--sg-text-alt) !important;font-weight:500}
.sg-crumbs a:hover{color:var(--sg-heading) !important;text-decoration:underline}

/* ---- Artículo / página de contenido ---- */
.sg-post-head{margin:60px 0 32px}
.sg-post-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-bottom:16px}
.sg-post-meta time,.sg-post-meta .sg-post-meta__item{font-size:12px;font-weight:500;line-height:1;text-transform:uppercase;color:var(--sg-text-alt)}
.sg-post-meta .sep{color:var(--sg-text-alt)}
@media (max-width:768px){.sg-post-head{margin:32px 0 24px}}
.sg-post{margin:0 auto 48px;color:var(--sg-text)}
.sg-post>h1:first-child,.sg-post-head+.sg-post>h1:first-child{margin:0 0 24px;font-size:52px;letter-spacing:-1.5px}
.sg-post-head+.sg-post>h1:first-child{margin-top:0}
.sg-page>h1:first-child{margin-top:60px}
.sg-post h2{margin:48px 0 16px;font-size:28px}
.sg-post h3{margin:32px 0 12px;font-size:24px}
.sg-post h4{font-size:20px}
.sg-post p,.sg-post ul,.sg-post ol,.sg-post table,.sg-post pre,.sg-post figure{margin:0 0 28px}
.sg-post ul,.sg-post ol{padding-left:24px}
.sg-post li{margin-bottom:8px}
.sg-post a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.sg-post a:hover{text-decoration-color:var(--sg-primary);text-decoration-thickness:2px}
.sg-post img{border-radius:16px}
.sg-post strong{color:var(--sg-heading)}
.sg-post blockquote{position:relative;margin:48px 0;padding-left:32px;font-size:24px;line-height:1.5;font-weight:700;border-left:4px solid var(--sg-primary);color:var(--sg-heading)}
.sg-post blockquote p{margin:0}
.sg-post blockquote p+p{margin-top:12px}
.sg-post code{padding:2px 6px;border-radius:6px;font-size:.9em;background:var(--sg-bg-alt);color:var(--sg-heading)}
.sg-post pre{padding:16px;border-radius:16px;font-size:14px;overflow:auto;white-space:pre-wrap;word-break:break-word;background:var(--sg-bg-alt);color:var(--sg-heading)}
.sg-post pre code{padding:0;background:none}
.sg-post hr{width:100%;height:1px;margin:60px 0;border:0;background:var(--sg-border)}
.sg-post table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:15px;color:var(--sg-heading)}
.sg-post th{padding:10px 12px;text-align:left;font-weight:700;border:1px solid var(--sg-border);background:var(--sg-bg-alt)}
.sg-post td{padding:10px 12px;border:1px solid var(--sg-border)}
.sg-post tr:nth-child(even) td{background:transparent}
.sg-post img+em,.sg-post figcaption{display:block;margin-top:12px;font-size:12px;font-style:normal;text-align:center;color:var(--sg-text-alt)}
@media (max-width:768px){.sg-post>h1:first-child{font-size:42px}.sg-post blockquote{margin:40px 0;font-size:22px}}
@media (max-width:576px){.sg-post>h1:first-child{font-size:32px}.sg-post blockquote{margin:32px 0;padding-left:20px;font-size:20px}}

/* Autor y relacionados */
.author-box{display:flex;align-items:center;gap:16px;margin:56px 0 0;padding:24px;border-radius:22px;background:var(--sg-bg-alt)}
.author-box img{flex:none;width:64px;height:64px;border-radius:50% !important;object-fit:cover}
.author-box p{margin:0 0 4px;font-size:15px}
.author-box a{font-weight:600}
.related{margin:64px 0 0;padding-top:32px;border-top:1px solid var(--sg-border)}
.related h2{margin:0 0 20px !important;font-size:14px !important;font-weight:500;letter-spacing:1.8px;text-transform:uppercase;color:var(--sg-text-alt)}
.related ul{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:0;padding:0;list-style:none}
.related li{margin:0}
.related li a{display:block;height:100%;padding:22px 24px;border-radius:22px;font-size:17px;font-weight:600;line-height:1.4;text-decoration:none;color:var(--sg-heading);background:var(--sg-bg-alt);transition:transform .3s}
.related li a:hover{transform:translateY(-4px)}
.related .related__more{margin:20px 0 0;font-size:15px}
@media (max-width:640px){.related ul{grid-template-columns:1fr}}

/* ---- Páginas hub (listados de verticales) ---- */
.sg-hub .sg-content>h1:first-child{margin:48px 0 24px;font-size:80px;line-height:1;letter-spacing:-2.5px}
.sg-hub .sg-content>h1:first-child+p{max-width:820px;margin:0 0 32px;font-size:19px;color:var(--sg-text-alt)}
.sg-hub .sg-content>h2{margin:72px 0 28px;font-size:32px}
.sg-hub .sg-content>p{max-width:820px;color:var(--sg-text-alt)}
.sg-hub .sg-content>p a,.sg-hub .sg-content li a:not(.hub-card){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;color:var(--sg-heading)}
.sg-hub .sg-content>h3{margin:32px 0 12px;font-size:22px}
.sg-hub .sg-content>ul:not(.hub-grid),.sg-hub .sg-content>ol{max-width:820px;margin:0 0 32px;padding-left:24px}
.sg-hub .sg-content>ul li,.sg-hub .sg-content>ol li{margin-bottom:8px}
.sg-hub .sg-content hr{margin:56px 0;border:0;border-top:1px solid var(--sg-border)}
@media (max-width:1024px){.sg-hub .sg-content>h1:first-child{font-size:64px}}
@media (max-width:768px){.sg-hub .sg-content>h1:first-child{margin-top:32px;font-size:42px;letter-spacing:-1px}.sg-hub .sg-content>h2{margin-top:56px}}
@media (max-width:576px){.sg-hub .sg-content>h1:first-child{font-size:32px}.sg-hub .sg-content>h2{font-size:24px}}

.hub-grid{counter-reset:hub;display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px;margin:0 0 24px;padding:0;list-style:none}
.hub-grid li{counter-increment:hub;display:flex;flex-direction:column;margin:0}
.hub-grid li:nth-child(6n+1){--tone-a:#fbd5e4;--tone-b:#d14984}
.hub-grid li:nth-child(6n+2){--tone-a:#d6e4ff;--tone-b:#8fb2ff}
.hub-grid li:nth-child(6n+3){--tone-a:#ffe3d6;--tone-b:#ff9a76}
.hub-grid li:nth-child(6n+4){--tone-a:#fff0c2;--tone-b:#ffcf5c}
.hub-grid li:nth-child(6n+5){--tone-a:#e6dcff;--tone-b:#b9a2ff}
.hub-grid li:nth-child(6n+6){--tone-a:#d3f3ee;--tone-b:#7fdacb}
:root[dark] .hub-grid li:nth-child(6n+1){--tone-a:#34363a;--tone-b:#d14984}
:root[dark] .hub-grid li:nth-child(6n+2){--tone-a:#34363a;--tone-b:#5b7be0}
:root[dark] .hub-grid li:nth-child(6n+3){--tone-a:#34363a;--tone-b:#d1673f}
:root[dark] .hub-grid li:nth-child(6n+4){--tone-a:#34363a;--tone-b:#b8862a}
:root[dark] .hub-grid li:nth-child(6n+5){--tone-a:#34363a;--tone-b:#7c5fd1}
:root[dark] .hub-grid li:nth-child(6n+6){--tone-a:#34363a;--tone-b:#2f9c8c}
.hub-grid .hub-card{display:flex;flex-direction:column;flex:1;color:var(--sg-heading);text-decoration:none}
.hub-grid .hub-card::before{content:counter(hub,decimal-leading-zero);align-items:flex-end;justify-content:flex-start;margin-bottom:16px;aspect-ratio:16/10;font-size:64px;font-weight:700;line-height:.9;letter-spacing:-3px;color:rgba(3,7,17,.78);background-image:radial-gradient(rgba(255,255,255,.45) 2px,transparent 2px),linear-gradient(135deg,var(--tone-a),var(--tone-b));background-size:15px 15px,100% 100%}
:root[dark] .hub-grid .hub-card::before{color:rgba(255,255,255,.85)}
a.hub-card:hover::before{transform:translateY(-6px)}
.hub-grid .hub-card strong{display:block;font-size:22px;line-height:1.3;letter-spacing:-.4px;color:var(--sg-heading);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-decoration-color .2s}
a.hub-card:hover strong{text-decoration-color:var(--sg-heading)}
.hub-grid .hub-card span{display:block;margin-top:8px;font-size:16px;line-height:1.5;color:var(--sg-text-alt)}
.hub-card__meta{margin:10px 0 0 !important;font-size:14px !important}
.sg-hub .sg-content .hub-cta{margin:0 0 24px}
.sg-hub .sg-content .hub-cta a{display:inline-block;padding:10px 28px;border-radius:60px;font-weight:500;line-height:1.8;text-decoration:none !important;color:var(--sg-btn-color) !important;background:var(--sg-btn-bg);transition:background .2s,color .2s}
.sg-hub .sg-content .hub-cta a:hover{color:var(--sg-btn-hover-color) !important;background:var(--sg-btn-hover-bg)}
@media (max-width:1024px){.hub-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.hub-grid{grid-template-columns:1fr}}

/* Buscador */
.search-form{margin:16px 0 24px}
.search-label{display:block;margin-bottom:10px;font-weight:600;color:var(--sg-heading)}
.search-form input{width:100%;padding:20px 24px;font-size:16px;font-family:inherit;border:1px solid transparent;border-radius:8px;outline:0;color:var(--sg-heading);background:var(--sg-bg-alt);transition:border-color .2s,background .2s}
.search-form input::placeholder{color:var(--sg-text-alt)}
.search-form input:focus{border-color:var(--sg-heading);background:transparent}
.search-results{margin:0 !important;padding:0 !important;list-style:none}
.search-results li{margin:0;padding:16px 0;border-bottom:1px solid var(--sg-border)}
.search-results li a{font-weight:600}
.search-results li p{margin:4px 0 0;font-size:15px;color:var(--sg-text-alt)}
.meta{font-size:13px;color:var(--sg-text-alt)}

/* ---- Preguntas frecuentes (acordeón) ---- */
.sg-faq{max-width:820px;margin:24px 0 40px}
.sg-faq__item{margin:0 0 12px;padding:4px 40px;border:1px solid var(--sg-border);border-radius:12px;background:var(--sg-bg);box-shadow:0 2px 4px rgba(0,0,0,.08);transition:border-color .2s}
.sg-faq__item:hover,.sg-faq__item[open]{border-color:var(--sg-heading)}
.sg-faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;list-style:none;font-size:18px;font-weight:500;line-height:1.4;letter-spacing:normal;color:var(--sg-heading);cursor:pointer}
.sg-faq__item summary::-webkit-details-marker{display:none}
.sg-faq__item summary::after{content:"";flex:none;width:15px;height:15px;background:linear-gradient(var(--sg-heading),var(--sg-heading)) center/100% 2px no-repeat,linear-gradient(var(--sg-heading),var(--sg-heading)) center/2px 100% no-repeat;transition:transform .2s}
.sg-faq__item[open] summary::after{transform:rotate(45deg)}
.sg-faq__item summary:focus-visible{outline:2px solid var(--sg-primary);outline-offset:4px;border-radius:8px}
.sg-faq__body{padding:0 0 8px}
.sg-faq__body p{margin:0 0 16px !important;font-size:16px;color:var(--sg-text-alt)}
@media (max-width:576px){.sg-faq__item{padding:2px 20px}.sg-faq__item summary{font-size:16px}}