/* Home Pro Guides — tema de blog «HPG» (hpg). Se aplica a .hpg-post.hpg-theme-hpg. */
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&display=swap");
.hpg-post.hpg-theme-hpg{--bg:#EFFBFB;--fg:#0C3166;--muted:#57708F;--accent:#FF6339;--accent-ink:#ffffff;--line:rgba(12,49,102,.14);--soft:#ffffff;--head-font:'Nunito',system-ui,sans-serif;--body-font:'Nunito',system-ui,sans-serif;--body-size:17.5px;--lh:1.75;--h-weight:800;--h-track:-.01em;--w-base:720px;--w-normal:var(--w-base);--w-narrow:calc(var(--w-normal) * .78);--w-wide:calc(var(--w-normal) * 1.42);--gut:20px;--pad-b:72px;--body-top:40px;--gap:1.25em;--radius:14px;--radius-img:14px;--btn-radius:999px;--h1:clamp(1.9rem,5.6cqw,3rem);--h2:clamp(1.45rem,3.6cqw,1.85rem);--h3:clamp(1.2rem,2.8cqw,1.35rem);--h4:1.08rem;--t-info:#00A3A3;--t-tip:#17936b;--t-warning:#E08A00;--t-success:#0C3166;--link:#0C3166}

.hpg-post.hpg-theme-hpg{container-type:inline-size;display:block;width:100%;margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:var(--body-font);font-size:var(--body-size);line-height:var(--lh);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;text-size-adjust:100%}
.hpg-post.hpg-theme-hpg,.hpg-post.hpg-theme-hpg *,.hpg-post.hpg-theme-hpg *::before,.hpg-post.hpg-theme-hpg *::after{box-sizing:border-box}
.hpg-post.hpg-theme-hpg.hpg-c-narrow{--w-normal:calc(var(--w-base) * .86)}
.hpg-post.hpg-theme-hpg.hpg-c-wide{--w-normal:calc(var(--w-base) * 1.2)}
.hpg-post.hpg-theme-hpg .hpg-article{display:block;margin:0 auto;padding:0 0 var(--pad-b)}
.hpg-post.hpg-theme-hpg .hpg-head-in,.hpg-post.hpg-theme-hpg .hpg-body,.hpg-post.hpg-theme-hpg .hpg-toc,.hpg-post.hpg-theme-hpg .hpg-foot{width:min(var(--w-normal),100% - 2 * var(--gut));margin-inline:auto}
.hpg-post.hpg-theme-hpg .hpg-body{padding-top:var(--body-top)}
.hpg-post.hpg-theme-hpg .hpg-body::after{content:"";display:block;clear:both}

/* cabecera */
.hpg-post.hpg-theme-hpg .hpg-head{position:relative}
.hpg-post.hpg-theme-hpg .hpg-hero{margin:0}
.hpg-post.hpg-theme-hpg .hpg-hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.hpg-post.hpg-theme-hpg .hpg-eyebrow{margin:0 0 .9em;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.hpg-post.hpg-theme-hpg .hpg-title{margin:0;font-family:var(--head-font);font-weight:var(--h-weight);letter-spacing:var(--h-track);line-height:1.12;font-size:var(--h1);color:var(--head-color,var(--fg));text-wrap:balance}
.hpg-post.hpg-theme-hpg .hpg-excerpt{margin:1em 0 0;font-size:1.12em;line-height:1.55;color:var(--muted)}
.hpg-post.hpg-theme-hpg .hpg-meta{display:flex;flex-wrap:wrap;gap:.25em 0;margin:1.2em 0 0;padding:0;font-size:.82rem;color:var(--muted)}
.hpg-post.hpg-theme-hpg .hpg-meta span:not(:last-child)::after{content:"·";margin:0 .7em;opacity:.6}

/* texto */
.hpg-post.hpg-theme-hpg .hpg-body>*{margin-top:0;margin-bottom:var(--gap)}
.hpg-post.hpg-theme-hpg .hpg-body p{font-size:1em;line-height:var(--lh);margin-bottom:var(--gap)}
.hpg-post.hpg-theme-hpg .hpg-body h2,.hpg-post.hpg-theme-hpg .hpg-body h3,.hpg-post.hpg-theme-hpg .hpg-body h4{font-family:var(--head-font);font-weight:var(--h-weight);letter-spacing:var(--h-track);color:var(--head-color,var(--fg));line-height:1.2;clear:both;text-wrap:balance;scroll-margin-top:5rem}
.hpg-post.hpg-theme-hpg .hpg-body h2{font-size:var(--h2);margin:2.1em 0 .6em}
.hpg-post.hpg-theme-hpg .hpg-body h3{font-size:var(--h3);margin:1.7em 0 .5em}
.hpg-post.hpg-theme-hpg .hpg-body h4{font-size:var(--h4);margin:1.4em 0 .4em}
.hpg-post.hpg-theme-hpg .hpg-body>:first-child{margin-top:0}
.hpg-post.hpg-theme-hpg .hpg-body a{color:var(--link,var(--accent));text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.18em;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
.hpg-post.hpg-theme-hpg .hpg-body a:hover{text-decoration-color:currentColor}
.hpg-post.hpg-theme-hpg .hpg-body strong{font-weight:700;color:var(--strong,inherit)}
.hpg-post.hpg-theme-hpg .hpg-body ul,.hpg-post.hpg-theme-hpg .hpg-body ol{padding-left:1.4em;margin-bottom:var(--gap)}
.hpg-post.hpg-theme-hpg .hpg-body li{margin:0 0 .5em;padding-left:.2em}
.hpg-post.hpg-theme-hpg .hpg-body li::marker{color:var(--accent);font-weight:700}
.hpg-post.hpg-theme-hpg .hpg-body hr{border:0;height:1px;background:var(--line);margin:2.4em auto;width:100%}
.hpg-post.hpg-theme-hpg .hpg-body blockquote{margin:2em 0;padding:.2em 0 .2em 1.3em;border-left:3px solid var(--accent);font-family:var(--quote-font,var(--head-font));font-size:1.28em;line-height:1.45;font-style:italic;color:var(--quote-color,var(--head-color,var(--fg)))}
.hpg-post.hpg-theme-hpg .hpg-body blockquote p{margin:0;font-size:1em}
.hpg-post.hpg-theme-hpg .hpg-body blockquote footer{margin-top:.7em;font-family:var(--body-font);font-size:.7em;font-style:normal;color:var(--muted)}
.hpg-post.hpg-theme-hpg .hpg-body blockquote footer::before{content:"— "}

/* anchos por bloque: narrow / normal / wide / full (el contenedor del artículo es --w-normal). Selector con una clase más para ganar a las reglas de imágenes. */
.hpg-post.hpg-theme-hpg .hpg-body>.hpg-w-narrow{--bw:min(var(--w-narrow),100%);width:var(--bw);margin-left:calc((100% - var(--bw)) / 2);margin-right:0}
.hpg-post.hpg-theme-hpg .hpg-body>.hpg-w-wide{--bw:min(var(--w-wide),100cqw - 2 * var(--gut));width:var(--bw);max-width:none;margin-left:calc((100% - var(--bw)) / 2);margin-right:0}
.hpg-post.hpg-theme-hpg .hpg-body>.hpg-w-full{--bw:100cqw;width:var(--bw);max-width:none;margin-left:calc((100% - var(--bw)) / 2);margin-right:0}
.hpg-post.hpg-theme-hpg .hpg-body>.hpg-w-full:is(p,h2,h3,h4,ul,ol,blockquote,.hpg-callout,.hpg-cta,.hpg-faq,.hpg-table-wrap){padding-inline:var(--gut)}
.hpg-post.hpg-theme-hpg .hpg-body>.hpg-w-full.hpg-img img,.hpg-post.hpg-theme-hpg .hpg-body>.hpg-w-full .hpg-video-frame{border-radius:0}

/* imágenes */
.hpg-post.hpg-theme-hpg .hpg-img{display:block;margin-block:2em;margin-inline:auto}
.hpg-post.hpg-theme-hpg .hpg-img img{display:block;width:100%;height:auto;border-radius:var(--radius-img)}
.hpg-post.hpg-theme-hpg .hpg-img figcaption,.hpg-post.hpg-theme-hpg .hpg-video figcaption{margin-top:.7em;font-size:.8rem;line-height:1.45;color:var(--muted);text-align:center}
.hpg-post.hpg-theme-hpg .hpg-img--small{max-width:260px}.hpg-post.hpg-theme-hpg .hpg-img--medium{max-width:440px}.hpg-post.hpg-theme-hpg .hpg-img--large{max-width:100%}.hpg-post.hpg-theme-hpg .hpg-img--full{max-width:none}
.hpg-post.hpg-theme-hpg .hpg-img--left{margin-right:auto;margin-left:0}.hpg-post.hpg-theme-hpg .hpg-img--right{margin-left:auto;margin-right:0}.hpg-post.hpg-theme-hpg .hpg-img--center{margin-inline:auto}
@container (min-width:720px){
  .hpg-post.hpg-theme-hpg .hpg-img--left.hpg-img--small,.hpg-post.hpg-theme-hpg .hpg-img--left.hpg-img--medium{float:left;margin:.35em 1.8em 1em 0}
  .hpg-post.hpg-theme-hpg .hpg-img--right.hpg-img--small,.hpg-post.hpg-theme-hpg .hpg-img--right.hpg-img--medium{float:right;margin:.35em 0 1em 1.8em}
}
.hpg-post.hpg-theme-hpg .hpg-ph{display:grid;place-items:center;min-height:11rem;border:2px dashed var(--line);border-radius:var(--radius-img);background:var(--soft);color:var(--muted);font-size:.9rem;text-align:center;padding:1.5rem}
.hpg-post.hpg-theme-hpg .hpg-ph b{display:block;font-size:1.05em;color:var(--fg);margin-bottom:.2em}

/* incrustados (video, mapa, agenda, audio) */
.hpg-post.hpg-theme-hpg .hpg-video{margin-block:2em}
.hpg-post.hpg-theme-hpg .hpg-video-frame{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-img);background:#0b0b0c}
.hpg-post.hpg-theme-hpg .hpg-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hpg-post.hpg-theme-hpg .hpg-embed--map .hpg-video-frame{aspect-ratio:4/3;background:var(--soft)}
.hpg-post.hpg-theme-hpg .hpg-embed--tall .hpg-video-frame{aspect-ratio:auto;height:44rem;background:var(--soft)}
.hpg-post.hpg-theme-hpg .hpg-embed--audio .hpg-video-frame{aspect-ratio:auto;height:9.5rem;background:var(--soft)}

/* avisos */
.hpg-post.hpg-theme-hpg .hpg-callout{--tone:var(--t-info);margin-block:2em;padding:1.1em 1.3em;border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--tone) 30%,transparent);border-left:4px solid var(--tone);background:color-mix(in srgb,var(--tone) 9%,var(--bg));font-size:.95em;line-height:1.65}
.hpg-post.hpg-theme-hpg .hpg-callout--tip{--tone:var(--t-tip)}.hpg-post.hpg-theme-hpg .hpg-callout--warning{--tone:var(--t-warning)}.hpg-post.hpg-theme-hpg .hpg-callout--success{--tone:var(--t-success)}
.hpg-post.hpg-theme-hpg .hpg-callout-title{display:block;margin-bottom:.3em;font-family:var(--head-font);font-size:1.02em;color:color-mix(in srgb,var(--tone) 78%,var(--fg))}
.hpg-post.hpg-theme-hpg .hpg-callout>div{color:var(--fg)}.hpg-post.hpg-theme-hpg .hpg-callout p:last-child{margin-bottom:0}

/* botones */
.hpg-post.hpg-theme-hpg .hpg-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.7em 1.1em;margin-block:2.4em}
.hpg-post.hpg-theme-hpg .hpg-btn{display:inline-flex;align-items:center;justify-content:center;min-height:2.9rem;padding:.7em 1.7em;border-radius:var(--btn-radius);font-family:var(--body-font);font-size:.95rem;font-weight:700;letter-spacing:.01em;line-height:1.2;text-decoration:none!important;transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .16s,box-shadow .16s}
.hpg-post.hpg-theme-hpg .hpg-btn--primary{background:var(--accent);color:var(--accent-ink)!important;box-shadow:0 10px 24px -14px var(--accent)}
.hpg-post.hpg-theme-hpg .hpg-btn--secondary{background:transparent;color:var(--fg)!important;border:1.5px solid currentColor}
.hpg-post.hpg-theme-hpg .hpg-btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.hpg-post.hpg-theme-hpg .hpg-btn--primary:hover{filter:brightness(1.07);transform:translateY(-1px)}.hpg-post.hpg-theme-hpg .hpg-btn--secondary:hover{background:var(--soft)}}
.hpg-post.hpg-theme-hpg .hpg-cta small{font-size:.82rem;color:var(--muted)}

/* tabla */
.hpg-post.hpg-theme-hpg .hpg-table-wrap{overflow-x:auto;margin-block:2em;border-radius:var(--radius);border:1px solid var(--line);background:var(--bg)}
.hpg-post.hpg-theme-hpg .hpg-table{width:100%;border-collapse:collapse;font-size:.92em;line-height:1.5}
.hpg-post.hpg-theme-hpg .hpg-table caption{caption-side:top;padding:.8em 1em;text-align:left;font-size:.82rem;color:var(--muted)}
.hpg-post.hpg-theme-hpg .hpg-table th,.hpg-post.hpg-theme-hpg .hpg-table td{padding:.75em 1em;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.hpg-post.hpg-theme-hpg .hpg-table th{font-family:var(--head-font);font-size:.82em;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--soft);color:var(--head-color,var(--fg))}
.hpg-post.hpg-theme-hpg .hpg-table tbody tr:last-child td{border-bottom:0}
.hpg-post.hpg-theme-hpg .hpg-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--soft) 55%,transparent)}
.hpg-post.hpg-theme-hpg .hpg-table td:first-child{font-weight:600}

/* preguntas frecuentes */
.hpg-post.hpg-theme-hpg .hpg-faq{margin-block:2em}
.hpg-post.hpg-theme-hpg .hpg-faq dl{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg)}
.hpg-post.hpg-theme-hpg .hpg-faq dt{margin:0;padding:1em 1.25em .15em;font-family:var(--head-font);font-weight:700;font-size:1.04em;color:var(--head-color,var(--fg))}
.hpg-post.hpg-theme-hpg .hpg-faq dd{margin:0;padding:0 1.25em 1.1em;font-size:.96em;line-height:1.65;color:var(--fg);border-bottom:1px solid var(--line)}
.hpg-post.hpg-theme-hpg .hpg-faq dd:last-child{border-bottom:0}

/* índice */
.hpg-post.hpg-theme-hpg .hpg-toc{margin-block:var(--body-top) 0;padding:1.2em 1.4em;border:1px solid var(--line);border-radius:var(--radius);background:var(--soft);font-size:.92rem}
.hpg-post.hpg-theme-hpg .hpg-toc-title{margin:0 0 .6em;font-family:var(--head-font);font-size:.74rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.hpg-post.hpg-theme-hpg .hpg-toc ol{margin:0;padding-left:1.3em}
.hpg-post.hpg-theme-hpg .hpg-toc li{margin:.3em 0;padding-left:.1em}
.hpg-post.hpg-theme-hpg .hpg-toc li.hpg-toc-l3{display:block;margin-left:.2em;font-size:.95em;color:var(--muted)}
.hpg-post.hpg-theme-hpg .hpg-toc li.hpg-toc-l3::before{content:"– "}
.hpg-post.hpg-theme-hpg .hpg-toc a{color:var(--fg);text-decoration:none}.hpg-post.hpg-theme-hpg .hpg-toc a:hover{color:var(--accent);text-decoration:underline}

/* pie: autor y etiquetas */
.hpg-post.hpg-theme-hpg .hpg-foot{margin-top:3.2em;padding-top:1.8em;border-top:1px solid var(--line)}
.hpg-post.hpg-theme-hpg .hpg-author-box{display:flex;align-items:center;gap:1em;margin:0 0 1.4em}
.hpg-post.hpg-theme-hpg .hpg-avatar{flex:none;display:grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-family:var(--head-font);font-weight:800;font-size:1.05rem}
.hpg-post.hpg-theme-hpg .hpg-author-name{margin:0;font-family:var(--head-font);font-weight:700;color:var(--head-color,var(--fg))}
.hpg-post.hpg-theme-hpg .hpg-author-role{margin:.1em 0 0;font-size:.85rem;color:var(--muted)}
.hpg-post.hpg-theme-hpg .hpg-tags{display:flex;flex-wrap:wrap;gap:.5em;margin:0;padding:0;list-style:none}
.hpg-post.hpg-theme-hpg .hpg-tags li{margin:0;padding:.28em .8em;border:1px solid var(--line);border-radius:999px;font-size:.78rem;color:var(--muted)}

@container (max-width:640px){
  .hpg-post.hpg-theme-hpg .hpg-body ul,.hpg-post.hpg-theme-hpg .hpg-body ol{padding-left:1.2em}
  .hpg-post.hpg-theme-hpg .hpg-callout{padding:.95em 1em}
  .hpg-post.hpg-theme-hpg .hpg-embed--tall .hpg-video-frame{height:38rem}
  .hpg-post.hpg-theme-hpg .hpg-table th,.hpg-post.hpg-theme-hpg .hpg-table td{padding:.6em .7em}
}
@media (prefers-reduced-motion:reduce){.hpg-post.hpg-theme-hpg .hpg-btn{transition:none}}

.hpg-post.hpg-theme-hpg .hpg-head{color:#fff;background:#071B33;min-height:clamp(20rem,52cqw,31rem);display:flex;align-items:flex-end}
.hpg-post.hpg-theme-hpg .hpg-hero{position:absolute;inset:0}.hpg-post.hpg-theme-hpg .hpg-hero img{height:100%;aspect-ratio:auto}
.hpg-post.hpg-theme-hpg .hpg-head::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,27,51,.62) 0%,rgba(7,27,51,.12) 42%,rgba(7,27,51,.82) 100%)}
.hpg-post.hpg-theme-hpg .hpg-head-in{position:relative;z-index:1;padding:5rem 0 2.8rem}
.hpg-post.hpg-theme-hpg .hpg-head .hpg-title{color:#fff;font-size:clamp(1.8rem,5.6cqw,2.9rem);text-shadow:0 2px 24px rgba(7,27,51,.5)}
.hpg-post.hpg-theme-hpg .hpg-head .hpg-eyebrow{display:inline-flex;align-items:center;gap:.6em;color:#FF8B69;text-shadow:0 1px 10px rgba(7,27,51,.5)}
.hpg-post.hpg-theme-hpg .hpg-head .hpg-eyebrow::before{content:"";width:22px;height:1px;background:currentColor}
.hpg-post.hpg-theme-hpg .hpg-head .hpg-excerpt{color:#d9e6f5}.hpg-post.hpg-theme-hpg .hpg-head .hpg-meta{color:#c7d9ec}
.hpg-post.hpg-theme-hpg .hpg-body blockquote{border-left-color:#FF6339;font-family:var(--head-font);color:#0C3166;font-size:1.3em}
.hpg-post.hpg-theme-hpg .hpg-body ul li::marker{color:#FF6339}
.hpg-post.hpg-theme-hpg .hpg-cta{padding:2rem;border-radius:16px;background:#0C3166;justify-content:space-between}
.hpg-post.hpg-theme-hpg .hpg-cta .hpg-btn--primary{background:#FF6339;color:#201705!important}
.hpg-post.hpg-theme-hpg .hpg-cta .hpg-btn--secondary{color:#fff!important}.hpg-post.hpg-theme-hpg .hpg-cta small{color:#c7d9ec}
.hpg-post.hpg-theme-hpg .hpg-toc{background:#fff;border-color:rgba(12,49,102,.1)}
.hpg-post.hpg-theme-hpg .hpg-callout{background:#fff}
.hpg-post.hpg-theme-hpg .hpg-author-box{padding:1.2rem 1.4rem;background:#fff;border-radius:16px;border:1px solid rgba(12,49,102,.08)}
.hpg-post.hpg-theme-hpg .hpg-avatar{background:#0C3166;color:#fff}
@container (max-width:640px){.hpg-post.hpg-theme-hpg .hpg-head{min-height:22rem}.hpg-post.hpg-theme-hpg .hpg-head-in{padding:4rem 0 2rem}.hpg-post.hpg-theme-hpg .hpg-cta{padding:1.4rem}}
.hpg-post.hpg-theme-hpg .hpg-head--noimg{background:linear-gradient(135deg,#0C3166,#123E82)}