.blog-page { overflow: hidden; background: var(--paper); color: var(--ink); }
.blog-page h1, .blog-page h2, .blog-page h3 { color: var(--ink); letter-spacing: -.045em; }.blog-page h1 { max-width: 16ch; margin: 0; font-size: clamp(2.7rem, 6vw, 5.4rem); line-height: .96; }.blog-page h2 { line-height: 1.06; }.blog-page a { text-underline-offset: .22em; }.blog-page a:focus-visible, .blog-filter:focus-visible { outline: 3px solid var(--hup-brand); outline-offset: 3px; }
.blog-index__intro { padding: clamp(4rem, 10vw, 8rem) 0; background: radial-gradient(circle at 82% 18%, rgb(255 185 35 / .2), transparent 24rem), var(--hup-black); color: var(--paper); }.blog-index__intro > div, .blog-index__filters > div, .blog-index__featured, .blog-index__recent > div, .blog-index__cta > div { width: min(calc(100% - 2rem), var(--container)); margin-inline: auto; }.blog-index__intro > div > p:first-child, .blog-index__filters > div > p { margin: 0 0 .8rem; color: inherit; font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.blog-index__intro h1 { color: var(--paper); }.blog-index__intro h1 + p { max-width: 60ch; margin: 1.6rem 0 0; color: rgb(255 255 255 / .76); font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.65; }
.blog-index__filters { padding: clamp(2.2rem, 5vw, 3.4rem) 0; border-bottom: 1px solid var(--line); background: var(--surface); }.blog-index__filters h2, .blog-index__featured h2, .blog-index__recent h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.6rem); }.blog-filter-list { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.4rem; }.blog-filter { min-height: 2.75rem; padding: .56rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: .92rem; font-weight: 750; cursor: pointer; transition: color .2s ease, background-color .2s ease, transform .2s ease; }.blog-filter:hover { transform: translateY(-1px); border-color: var(--ink); }.blog-filter.is-active { border-color: var(--hup-black); background: var(--hup-black); color: var(--paper); }
.blog-index__featured, .blog-index__recent > div { padding-block: clamp(3.8rem, 7vw, 6.5rem); }.blog-index__recent { background: var(--surface); border-top: 1px solid var(--line); }.blog-grid { display: grid; gap: 1.25rem; margin-top: 2rem; }.blog-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 1.1rem; background: var(--paper); box-shadow: var(--shadow-sm); transition: transform .22s ease, box-shadow .22s ease; }.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }.blog-card__image { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface); }.blog-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }.blog-card:hover .blog-card__image img { transform: scale(1.025); }.blog-card__body { display: flex; flex: 1; flex-direction: column; gap: .8rem; padding: 1.25rem; }.blog-card__category { color: #60605a; font-size: .72rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }.blog-card h3 { margin: 0; font-size: 1.3rem; line-height: 1.15; }.blog-card h3 a { color: inherit; text-decoration: none; }.blog-card h3 a:hover { text-decoration: underline; }.blog-card p { margin: 0; color: #5b5b55; line-height: 1.58; }.blog-card__meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: .55rem; color: #65655e; font-size: .86rem; }.blog-card__meta a { color: var(--ink); font-weight: 800; text-decoration: none; white-space: nowrap; }.blog-card__meta a:hover { text-decoration: underline; }.blog-index__cta { border-top: 1px solid var(--line); }.blog-index__cta > div { display: flex; flex-direction: column; gap: 1.2rem; align-items: flex-start; padding-block: 3rem; }.blog-index__cta p { max-width: 40rem; margin: 0; font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 800; line-height: 1.35; }
.blog-article > article { display: block; }.blog-article .site-container { width: min(calc(100% - 2rem), 48rem); margin-inline: auto; }.blog-article article > header { padding-top: clamp(3rem, 7vw, 5.5rem); }.blog-article article > header nav { color: #60605a; font-size: .88rem; }.blog-article article > header nav ol { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }.blog-article article > header > div { margin-top: 2rem; }.blog-article article > header span { color: #60605a; font-size: .72rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }.blog-article h1 { margin-top: .8rem; }.blog-article article > header > p { color: #5b5b55; line-height: 1.7; }.blog-article article > header > p:nth-last-of-type(2) { margin-top: 1.35rem; font-size: 1.14rem; }.blog-article article > header img { width: 100%; margin-top: 2rem; border-radius: 1rem; box-shadow: var(--shadow-md); }.blog-article article > div > nav[aria-labelledby="toc"] { margin-top: 2.6rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }.blog-article article > div > nav[aria-labelledby="toc"] h2 { margin: 0; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }.blog-article article > div > nav[aria-labelledby="toc"] ol { display: grid; gap: .55rem; margin: 1rem 0 0; padding-left: 1.2rem; }.blog-article article > div > nav[aria-labelledby="toc"] a { color: #494943; }.blog-article article > div > div { margin-top: 3rem; color: #3f3f3a; font-size: 1.05rem; line-height: 1.8; }.blog-article article > div > div section { scroll-margin-top: 6rem; margin-top: 3rem; }.blog-article article > div > div h2 { margin: 0 0 1rem; font-size: clamp(1.55rem, 3.5vw, 2.25rem); }.blog-article article > div > div h3 { margin-top: 2rem; }.blog-article article > div > div p { margin: 1rem 0; }.blog-article article > div > div ul, .blog-article article > div > div ol { display: grid; gap: .45rem; padding-left: 1.35rem; }.blog-article article > div > div figure { margin: 2rem 0; padding: 1.3rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }.blog-article article > div > div figcaption { margin-bottom: .8rem; color: #5b5b55; font-size: .75rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }.blog-article article > div > div figure > div { display: grid; gap: 1rem; }.blog-article article > div > div figure > div > div { padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--paper); }.blog-article article > div > aside { width: min(calc(100% - 2rem), 48rem); margin: 3.8rem auto 0; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 1.15rem; background: var(--hup-black); color: var(--paper); }.blog-article article > div > aside h2, .blog-article article > div > aside p { color: inherit; }.blog-article article > div > aside h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); }.blog-article article > div > aside p { line-height: 1.65; }.blog-article article > div > aside a { display: inline-block; margin-top: .8rem; padding: .8rem 1rem; border-radius: 999px; background: var(--hup-brand); color: var(--hup-black); font-weight: 850; text-decoration: none; }.blog-article article > section[aria-labelledby="relacionados"] { margin-top: clamp(3.8rem, 7vw, 6rem); border-top: 1px solid var(--line); background: var(--surface); }.blog-article article > section[aria-labelledby="relacionados"] > div { width: min(calc(100% - 2rem), var(--container)); margin-inline: auto; padding-block: clamp(3.8rem, 7vw, 6rem); }.blog-article article > section[aria-labelledby="relacionados"] h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.5rem); }.blog-article article > section[aria-labelledby="relacionados"] article { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: var(--paper); }.blog-article article > section[aria-labelledby="relacionados"] article > a img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }.blog-article article > section[aria-labelledby="relacionados"] article > div { display: grid; gap: .8rem; padding: 1.2rem; }.blog-article article > section[aria-labelledby="relacionados"] article h3 { margin: 0; font-size: 1.2rem; }.blog-article article > section[aria-labelledby="relacionados"] article p { margin: 0; color: #5b5b55; line-height: 1.55; }
@media (min-width: 48rem) { .blog-index__intro > div, .blog-index__filters > div, .blog-index__featured, .blog-index__recent > div, .blog-index__cta > div, .blog-article .site-container, .blog-article article > div > aside, .blog-article article > section[aria-labelledby="relacionados"] > div { width: min(calc(100% - 4rem), var(--container)); }.blog-article .site-container, .blog-article article > div > aside { max-width: 48rem; }.blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }.blog-index__cta > div { flex-direction: row; align-items: center; justify-content: space-between; }.blog-article article > div > div figure > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }.blog-article article > section[aria-labelledby="relacionados"] > div > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; } }
@media (min-width: 75rem) { .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.blog-grid--featured { gap: 1.8rem; }.blog-card__body { padding: 1.4rem; } }
@media (prefers-reduced-motion: reduce) { .blog-page *, .blog-page *::before, .blog-page *::after { scroll-behavior: auto !important; transition: none !important; } }