@font-face{font-family:Onest;src:url('/fonts/Onest-Regular.ttf');font-weight:400;font-display:swap}
@font-face{font-family:Onest;src:url('/fonts/Onest-Medium.ttf');font-weight:500 800;font-display:swap}
.blog-page{--blog-paper:#f1f2ed;--blog-surface:#fafbf7;--blog-ink:#161616;--blog-soft:#4d5447;--blog-muted:#62695c;--blog-line:#cbd0c7;--blog-lime:#e4fe55;--blog-dark:radial-gradient(ellipse at 8% 0,#3a3d37,transparent 62%),#161616}
.blog-page *,.blog-page *::before,.blog-page *::after{box-sizing:border-box}
body.blog-page{margin:0;background:var(--blog-paper);color:var(--blog-ink);font:400 17px/1.7 Onest,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.blog-main{max-width:1240px;margin:auto;padding:56px 5vw 110px}
:where(.blog-main) a{color:inherit;-webkit-tap-highlight-color:transparent}
.blog-main a:focus-visible{outline:2px solid #71891c;outline-offset:4px;border-radius:4px}
.blog-main img{display:block;max-width:100%;height:auto}
.blog-eyebrow{display:block;font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--blog-muted);margin:0}

/* Ruta de navegación */
.blog-breadcrumb ol{display:flex;flex-wrap:wrap;gap:6px 10px;list-style:none;margin:0 0 30px;padding:0;font-size:13px;line-height:1.5;color:var(--blog-muted)}
.blog-breadcrumb li{display:flex;gap:10px;min-width:0}
.blog-breadcrumb li+li::before{content:'/';color:#9aa390}
.blog-breadcrumb a{color:var(--blog-soft);text-decoration:none}
.blog-breadcrumb a:hover{color:var(--blog-ink);text-decoration:underline;text-underline-offset:4px}
.blog-breadcrumb [aria-current]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(60vw,520px)}

/* Portada */
.blog-hero{display:grid;gap:18px;max-width:900px}
.blog-hero h1{font-size:clamp(38px,6vw,84px);font-weight:500;line-height:.98;letter-spacing:-.055em;margin:0;text-wrap:balance}
.blog-hero mark{background:linear-gradient(transparent 22%,#e4fe55b3 22%);color:inherit;padding:0 .05em}
.blog-hero>p:last-child{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--blog-soft);max-width:56ch;margin:0}
.blog-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:54px 0 0;padding:0;list-style:none}
.blog-list>li{min-width:0;display:flex}
.blog-item-featured{grid-column:1/-1}
.blog-card{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;background:var(--blog-surface);border:1px solid var(--blog-line);border-radius:20px;text-decoration:none;transition:border-color .3s cubic-bezier(.16,1,.3,1),translate .45s cubic-bezier(.16,1,.3,1),background-color .3s}
.blog-card-image{width:100%;aspect-ratio:16/9;object-fit:cover;background:#e6e8e1;border-bottom:1px solid var(--blog-line)}
.blog-card-text{display:flex;flex-direction:column;flex:1;gap:14px;padding:28px 30px 26px}
.blog-card h2{font-size:clamp(22px,2.1vw,29px);font-weight:500;line-height:1.14;letter-spacing:-.035em;margin:0;text-wrap:balance}
.blog-card:not(.blog-card-media) h2{padding-right:40px}
.blog-card-summary{color:var(--blog-soft);font-size:15px;line-height:1.6}
.blog-meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0;font-size:13px;line-height:1.5;color:var(--blog-muted)}
.blog-meta>*+*::before{content:'·';margin-right:10px;color:#9aa390}
.blog-card .blog-meta{margin-top:auto;padding-top:12px}
.blog-card-arrow{position:absolute;top:22px;right:22px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--blog-line);background:var(--blog-surface);font-size:15px;line-height:1;transition:background-color .3s,border-color .3s,rotate .45s cubic-bezier(.16,1,.3,1)}
.blog-card-featured{background:var(--blog-dark);border-color:#161616;color:#f1f2ed}
.blog-card-featured.blog-card-media{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.blog-card-featured .blog-card-image{order:2;height:100%;aspect-ratio:auto;min-height:340px;border:0}
.blog-card-featured .blog-card-text{gap:18px;padding:clamp(30px,4vw,52px);justify-content:center}
.blog-card-featured h2{font-size:clamp(28px,3.4vw,46px);line-height:1.05;letter-spacing:-.045em}
.blog-card-featured .blog-card-summary{color:#c9cec3;font-size:clamp(16px,1.3vw,18px)}
.blog-card-featured .blog-eyebrow,.blog-card-featured .blog-meta{color:#adb3a6}
.blog-card-featured .blog-meta{margin-top:0}
.blog-card-featured .blog-card-arrow{width:44px;height:44px;font-size:18px;color:var(--blog-ink)}
.blog-feed{margin:34px 0 0;font-size:14px;color:var(--blog-muted)}
.blog-feed a{text-underline-offset:4px}
@media(hover:hover) and (pointer:fine){
  .blog-card:hover{border-color:var(--blog-ink);translate:0 -3px}
  .blog-card:hover .blog-card-arrow{background:var(--blog-lime);border-color:var(--blog-lime);color:var(--blog-ink);rotate:45deg}
}

/* Artículo */
.blog-post{max-width:1160px}
.blog-post-header{display:grid;gap:18px;max-width:880px;margin:0 0 40px}
.blog-post-header h1{font-size:clamp(32px,4.6vw,60px);font-weight:500;line-height:1.04;letter-spacing:-.05em;margin:0;text-wrap:balance}
.blog-lead{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--blog-soft);margin:0;max-width:62ch}
.blog-cover{margin:0 0 48px}
.blog-cover img{width:100%;border-radius:20px;border:1px solid var(--blog-line);background:#e6e8e1}
.blog-post-header:has(+.blog-layout){padding-bottom:32px;border-bottom:1px solid var(--blog-line);margin-bottom:44px}
.blog-layout{display:grid;grid-template-columns:minmax(0,720px) minmax(220px,280px);justify-content:space-between;gap:48px 64px;align-items:start}
.blog-side{grid-column:2;grid-row:1;position:sticky;top:104px;display:grid;gap:22px;max-height:calc(100vh - 124px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#b6bcae transparent}
.blog-toc{border-left:1px solid var(--blog-line);padding:2px 0 2px 22px}
.blog-toc ol{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:11px;font-size:14px;line-height:1.4}
.blog-toc a{color:var(--blog-soft);text-decoration:none}
.blog-toc a:hover{color:var(--blog-ink);text-decoration:underline;text-underline-offset:4px}
.blog-body{grid-column:1;grid-row:1;min-width:0}
.blog-body>:first-child{margin-top:0}
.blog-answer{margin:0 0 36px;padding:24px 26px;background:var(--blog-surface);border:1px solid var(--blog-line);border-left:3px solid var(--blog-ink);border-radius:0 16px 16px 0}
.blog-answer .blog-eyebrow{margin:0 0 10px}
.blog-answer p:last-child{margin:0;font-size:18px;line-height:1.6}
.blog-answer+*{margin-top:0}
.blog-body h2{font-size:clamp(24px,2.4vw,32px);font-weight:500;line-height:1.15;letter-spacing:-.035em;margin:56px 0 16px;scroll-margin-top:112px;text-wrap:balance}
.blog-body h3{font-size:20px;font-weight:500;line-height:1.3;letter-spacing:-.02em;margin:34px 0 10px;scroll-margin-top:112px}
.blog-body p{margin:0 0 20px}
.blog-body strong{font-weight:500}
.blog-body a{text-decoration:underline;text-decoration-color:#9aa390;text-decoration-thickness:1px;text-underline-offset:4px}
.blog-body a:hover{text-decoration-color:var(--blog-ink)}
.blog-body ul,.blog-body ol{margin:0 0 24px;padding-left:24px;display:grid;gap:10px}
.blog-body li::marker{color:#767e6c}
.blog-body li>ul,.blog-body li>ol{margin:10px 0 0}
.blog-body blockquote{margin:32px 0;padding:22px 26px;background:#e7ebe2;border-left:3px solid var(--blog-ink);border-radius:0 16px 16px 0;font-size:18px;line-height:1.6}
.blog-body blockquote p:last-child{margin:0}
.blog-table{overflow-x:auto;margin:0 0 28px;border:1px solid var(--blog-line);border-radius:16px;background:var(--blog-surface)}
.blog-body table{width:100%;min-width:520px;border-collapse:collapse;font-size:15px;line-height:1.5}
.blog-body th{text-align:left;font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--blog-muted);background:#eceee8}
.blog-body th,.blog-body td{padding:14px 18px;border-bottom:1px solid var(--blog-line);vertical-align:top}
.blog-body tr:last-child td{border-bottom:0}
.blog-body code{background:#e4e8df;border-radius:6px;padding:.12em .4em;font:400 .88em/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.blog-body pre{margin:0 0 26px;padding:20px 22px;background:#161616;color:#f1f2ed;border-radius:16px;overflow-x:auto;font-size:14px;line-height:1.6}
.blog-body pre code{background:none;padding:0;font-size:inherit;color:inherit}
.blog-figure{margin:32px 0}
.blog-figure img{width:100%;border-radius:16px;border:1px solid var(--blog-line);background:#e6e8e1}
.blog-figure figcaption{margin-top:10px;font-size:13px;line-height:1.5;color:var(--blog-muted)}
.blog-body hr{border:0;border-top:1px solid var(--blog-line);margin:44px 0}
.blog-faq{margin:56px 0 0}
.blog-faq>h2{margin-top:0}
.blog-faq-item{padding:22px 0;border-top:1px solid var(--blog-line)}
.blog-faq-item:last-child{border-bottom:1px solid var(--blog-line)}
.blog-body .blog-faq-item h3{margin:0 0 10px}
.blog-faq-item>:last-child{margin-bottom:0}

/* Servicio: en el medio del artículo y en la barra lateral */
.blog-service{background:var(--blog-dark);color:#f1f2ed;border-radius:20px}
.blog-service .blog-eyebrow{color:#adb3a6}
.blog-service-title{font-weight:500;letter-spacing:-.03em;line-height:1.15;margin:0;text-wrap:balance}
.blog-service p:not(.blog-eyebrow):not(.blog-service-title):not(.blog-service-links){color:#c9cec3;margin:0}
.blog-service-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:0}
.blog-service .blog-service-links a{font-size:14px;color:#f1f2ed;text-decoration:underline;text-decoration-color:#ffffff66;text-underline-offset:4px}
.blog-service .blog-service-links a:hover{text-decoration-color:#f1f2ed}
.blog-service .blog-service-links .blog-service-link{display:inline-flex;align-items:center;gap:14px;min-height:46px;padding:11px 18px;background:var(--blog-lime);color:#161616;border-radius:14px;font-weight:500;text-decoration:none;transition:rotate .45s cubic-bezier(.16,1,.3,1),scale .45s cubic-bezier(.16,1,.3,1)}
.blog-service a:focus-visible{outline-color:var(--blog-lime)}
.blog-service-inline{display:grid;gap:12px;margin:44px 0;padding:clamp(24px,3vw,32px)}
.blog-service-inline .blog-service-title{font-size:clamp(22px,2.2vw,28px)}
.blog-service-inline p:not(.blog-eyebrow):not(.blog-service-title):not(.blog-service-links){font-size:16px;line-height:1.6;max-width:56ch}
.blog-service-inline .blog-service-links{margin-top:10px}
.blog-service-inline+h2{margin-top:44px}
.blog-service-side{display:grid;gap:10px;padding:20px 22px;background:var(--blog-surface);color:var(--blog-ink);border:1px solid var(--blog-line);border-radius:16px}
.blog-service-side .blog-eyebrow{color:var(--blog-muted)}
.blog-service-side .blog-service-title{font-size:18px;line-height:1.25;letter-spacing:-.02em}
.blog-service-side .blog-service-links{margin-top:6px}
.blog-service.blog-service-side .blog-service-links .blog-service-link{min-height:0;padding:0;background:none;color:var(--blog-ink);border-radius:0;font-size:14px;text-decoration:underline;text-decoration-color:#9aa390;text-underline-offset:4px}
.blog-service.blog-service-side .blog-service-links .blog-service-link:hover{text-decoration-color:var(--blog-ink);rotate:none;scale:none}

.blog-cta{margin:60px 0 0;padding:clamp(26px,3vw,38px);border-radius:20px;background:var(--blog-surface);border:1px solid var(--blog-line)}
.blog-body .blog-cta h2{font-size:clamp(24px,2.4vw,32px);margin:0 0 10px}
.blog-cta p{color:var(--blog-soft);margin:0 0 24px;max-width:52ch}
.blog-body .blog-cta a{display:inline-flex;align-items:center;gap:22px;min-height:54px;padding:14px 22px;background:#161616;color:#f1f2ed;border-radius:16px;font-weight:500;text-decoration:none;transition:rotate .45s cubic-bezier(.16,1,.3,1),scale .45s cubic-bezier(.16,1,.3,1)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.blog-body .blog-cta a:hover,.blog-service .blog-service-links .blog-service-link:hover{rotate:-4deg;scale:1.03}}
.blog-related{margin:84px 0 0;padding-top:40px;border-top:1px solid var(--blog-line)}
.blog-related>h2{font-size:clamp(24px,2.4vw,32px);font-weight:500;letter-spacing:-.035em;line-height:1.15;margin:0}
.blog-related .blog-list{margin-top:26px}

/* En pantallas angostas no hay barra lateral: el servicio queda en el medio del artículo. */
@media(max-width:980px){
  .blog-layout{grid-template-columns:minmax(0,1fr);gap:32px}
  .blog-side,.blog-body{grid-column:1;grid-row:auto}
  .blog-side{position:static;max-height:none;overflow:visible}
  .blog-side:not(:has(.blog-toc)){display:none}
  .blog-service-side{display:none}
  .blog-toc{border:1px solid var(--blog-line);border-radius:16px;padding:20px 22px;background:var(--blog-surface)}
  .blog-card-featured.blog-card-media{grid-template-columns:minmax(0,1fr)}
  .blog-card-featured .blog-card-image{order:0;min-height:0;aspect-ratio:16/9}
}
@media(max-width:760px){
  body.blog-page{font-size:16px}
  .blog-main{padding:34px 20px 72px}
  .blog-breadcrumb ol{margin-bottom:22px}
  .blog-list{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:38px}
  .blog-card-text{padding:22px 22px 20px}
  .blog-card-arrow{top:16px;right:16px}
  .blog-post-header{margin:0 0 28px}
  .blog-post-header:has(+.blog-layout){padding-bottom:26px;margin-bottom:32px}
  .blog-cover{margin-bottom:32px}
  .blog-cover img{border-radius:16px}
  .blog-answer{padding:20px}
  .blog-answer p:last-child{font-size:17px}
  .blog-body h2{margin-top:44px}
  .blog-body blockquote{padding:18px 20px;font-size:17px}
  .blog-service-inline{margin:36px 0}
  .blog-related{margin-top:60px}
}
@media(prefers-reduced-motion:reduce){.blog-card,.blog-card-arrow,.blog-body .blog-cta a,.blog-service-link{transition:none}}