/* Crouton Lab · artículos del blog (se carga después de crouton.css)
   Mantiene las clases del markup existente y las viste con el sistema v2. */

.article-hero{background:var(--tinta);color:var(--miga);padding:calc(72px + clamp(48px,8vw,104px)) 0 clamp(48px,7vw,88px)}
.article-hero-inner{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter);display:grid;gap:22px;max-width:calc(var(--wrap) - 0px)}
.breadcrumb{display:flex;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--miga-72)}
.breadcrumb a:hover{color:var(--miga)}
.article-tag{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--durazno);margin:8px 0 0}
.article-h1{font-size:clamp(38px,5.6vw,80px);color:var(--bruma);max-width:18ch;line-height:1}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;color:var(--miga-72);font-size:var(--fs-sm);margin-top:8px}
.article-meta a{color:var(--miga);border-bottom:1px solid var(--miga-72)}
.meta-dot{width:4px;height:4px;border-radius:50%;background:var(--miga-72)}

.article-body{max-width:72ch;margin:0 auto;padding:clamp(48px,7vw,88px) var(--gutter) clamp(64px,9vw,120px);font-size:17.5px;line-height:1.7}
.article-body > p{margin:0 0 22px}
.article-body h2{font-size:clamp(28px,3.2vw,40px);margin:56px 0 18px;letter-spacing:-.03em;line-height:1.1}
.article-body h3{font-size:clamp(21px,2.2vw,26px);margin:36px 0 12px}
.article-body ul,.article-body ol{padding-left:22px;margin:0 0 24px}
.article-body li{margin:0 0 8px}
.article-body a{color:var(--toronja);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.article-body a:hover{color:var(--toronja-hover)}
.article-body strong{font-weight:700}
.article-body img{border-radius:var(--r-sm)}

.callout{background:var(--arena);border-radius:var(--r-sm);padding:24px 28px;margin:32px 0}
.callout p{margin:0}
.callout p + p{margin-top:12px}

.table-wrap{overflow-x:auto;margin:32px 0;-webkit-overflow-scrolling:touch}
.data-table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:520px}
.data-table th{text-align:left;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;font-weight:500;padding:12px 14px;border-bottom:1px solid var(--carbon);color:var(--carbon-70)}
.data-table td{padding:14px;border-bottom:1px solid var(--carbon-12);vertical-align:top;font-variant-numeric:tabular-nums}
.price-highlight{font-weight:700;color:var(--toronja)}

.article-cta{background:var(--toronja);color:var(--miga);border-radius:var(--r-md);padding:clamp(32px,5vw,56px);margin:48px 0}
.article-cta-inner{display:grid;gap:16px;justify-items:start}
.article-cta h2{margin:0;font-size:clamp(26px,3vw,38px);color:var(--miga)}
.article-cta p{margin:0;max-width:44ch;color:rgba(252,249,246,.9)}
.article-cta .btn-dark{display:inline-flex;align-items:center;min-height:48px;padding:0 26px;border-radius:var(--r-pill);background:var(--tinta);color:var(--miga);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;text-decoration:none;margin-top:8px;transition:background var(--d-fast) var(--ease-out)}
.article-cta .btn-dark:hover{background:var(--tinta-alta);color:var(--miga)}
.cta-note{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--ls-label);color:rgba(252,249,246,.8)}

.art-faq{border-top:1px solid var(--carbon-12);margin:8px 0 40px}
.art-faq-item{border-bottom:1px solid var(--carbon-12)}
.art-faq-trigger{all:unset;box-sizing:border-box;width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;cursor:pointer;font-weight:500;font-size:19px;letter-spacing:-.015em;line-height:1.3}
.art-faq-trigger:hover{color:var(--toronja-hover)}
.art-faq-trigger:focus-visible{outline:2px solid var(--carbon);outline-offset:3px}
.art-faq-icon{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;background:linear-gradient(currentColor,currentColor) center/9px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 9px no-repeat;transition:transform var(--d-state) var(--ease-both)}
.art-faq-item.open .art-faq-icon{transform:rotate(45deg)}
.art-faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--d-state) var(--ease-both)}
.art-faq-item.open .art-faq-body{grid-template-rows:1fr}
.art-faq-body-inner{overflow:hidden;color:var(--carbon-70)}
.art-faq-body-inner p{margin:0 0 20px}

.author-box{display:flex;gap:18px;align-items:flex-start;padding:28px 0;border-top:1px solid var(--carbon-12);border-bottom:1px solid var(--carbon-12);margin:56px 0 40px}
.author-photo img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.author-name{font-weight:700}
.author-bio{color:var(--carbon-70);font-size:var(--fs-sm)}

.related{display:grid;gap:14px}
.related-label{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--carbon-70);margin:0}
.related-links{display:grid;gap:0;border-top:1px solid var(--carbon-12)}
.related-link{display:block;padding:16px 0;border-bottom:1px solid var(--carbon-12);font-size:19px;font-weight:500;letter-spacing:-.015em;color:var(--carbon);text-decoration:none}
.related-link:hover{color:var(--toronja-hover)}

@media (prefers-reduced-motion:reduce){.art-faq-body,.art-faq-icon{transition:none}}