@font-face { font-family: 'Transforma Sans Trial'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/TransformaSans_Trial-ExtraBlack-BF660ca8e06a42c.otf') format('opentype'); }
.site-header { position: sticky; z-index: 30; top: 0; border-bottom: 1px solid rgb(2 74 60 / 18%); background: rgb(255 249 235 / 97%); backdrop-filter: blur(12px); }
.utility-bar { overflow: hidden; background: #1e1e1e; color: #b4c4d1; }
.utility-content { display: flex; min-height: 32px; align-items: stretch; justify-content: space-between; gap: 16px; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.publication-tabs { display: flex; align-items: stretch; margin-left: -12px; background: var(--color-surface); }
.publication-tab { display: inline-flex; align-items: center; padding: 0 13px; color: rgb(180 196 209 / 72%); }
.publication-tab:not(.publication-tab-current) img { opacity: 0.5; transition: opacity 180ms ease; }
.publication-tab:not(.publication-tab-current):hover img { opacity: 1; }
.publication-tab-ecosistema, .publication-tab-freek, .publication-tab-three-x-twelve { background: #1e1e1e; }
.publication-tab-current { background: var(--color-surface); color: var(--color-text); }
.publication-tab-ecosistema { padding-inline: 12px; }
.publication-tab-ecosistema img { width: auto; height: 10.8px; filter: invert(1); object-fit: contain; transform: translateY(1px); }
.publication-tab-freek { padding-inline: 12px; border-bottom-right-radius: 7px; }
.publication-tab-freek img { width: auto; height: 12.6px; object-fit: contain; }
.publication-tab-bioramas { padding-inline: 12px; }
.publication-tab-bioramas img { width: auto; height: 10.8px; object-fit: contain; }
.publication-tab-three-x-twelve { padding-inline: 12px; border-bottom-left-radius: 7px; }
.publication-tab-three-x-twelve img { width: auto; height: 10.8px; filter: invert(1); object-fit: contain; }
.utility-publisher { display: inline-flex; align-items: center; gap: 9px; color: #b4c4d1; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.075em; line-height: 1; text-transform: uppercase; }
.utility-publisher-label { color: #fff; opacity: 0.5; transform: translateY(2px); transition: opacity 180ms ease; }
.utility-publisher .blogea-mark { color: #fff; opacity: 0.5; transition: opacity 180ms ease; }
.utility-publisher:hover .utility-publisher-label, .utility-publisher:hover .blogea-mark { opacity: 1; }
.vivelanavidad-badge { position: relative; display: inline-flex; width: 174px; height: 32px; flex: none; align-items: center; justify-content: center; overflow: hidden; padding-inline: 12px; margin-right: 100px; background: transparent; transition: background-color 180ms ease; }
.vivelanavidad-badge::before { position: absolute; inset: 0; background-image: radial-gradient(circle, rgb(255 255 255 / 75%) 0 1px, transparent 1.5px), radial-gradient(circle, rgb(255 255 255 / 45%) 0 1.5px, transparent 2px); background-position: 0 -16px, 12px -4px; background-size: 22px 28px, 33px 38px; content: ''; opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
.vivelanavidad-badge img { position: absolute; z-index: 1; width: 150px; max-width: 100%; height: auto; object-fit: contain; }
.vivelanavidad-badge:hover { background: #1c5b30; }
.vivelanavidad-badge:hover::before { animation: vive-la-navidad-nieve 7s linear infinite; opacity: 0.62; }
@keyframes vive-la-navidad-nieve { to { background-position: 0 12px, 12px 34px; } }
.blogea-mark { width: 87px; height: auto; color: #9fb1c1; }
.brand-row { position: relative; display: grid; min-height: 62px; grid-template-columns: 1fr auto 1fr; align-items: center; }
.wordmark { display: inline-flex; align-items: center; gap: 11px; color: var(--color-text); line-height: 1; }
.brand-row .wordmark { justify-self: center; }
.brand-mark { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: var(--color-brand-orange); }
.brand-mark img { width: 58%; height: auto; object-fit: contain; }
.brand-name { font-family: var(--font-display); font-size: 2rem; font-weight: 900; letter-spacing: -0.045em; }
.brand-row .brand-name { font-family: 'Transforma Sans Trial', var(--font-display); transform: translateY(2px); }
.header-menu { justify-self: start; }
.header-menu summary { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 8px; cursor: pointer; list-style: none; color: var(--color-text); font-size: 1.35rem; }
.header-menu summary::-webkit-details-marker { display: none; }
.header-menu summary:hover { background: var(--color-green-soft); }
.header-menu nav { position: absolute; z-index: 40; top: calc(100% + 1px); left: 0; display: none; width: min(360px, calc(100vw - 24px)); padding: 12px; border: var(--border); border-radius: 0 0 var(--radius-md) 0; background: var(--color-surface); box-shadow: var(--shadow); }
.header-menu[open] nav { display: grid; grid-template-columns: 1fr 1fr; }
.header-menu nav a { padding: 11px 12px; border-bottom: 1px solid rgb(2 74 60 / 14%); font-size: 0.8rem; font-weight: 900; text-transform: uppercase; }
.header-menu nav a:hover { background: var(--color-green-soft); }
.search-link { justify-self: end; display: inline-flex; min-height: 42px; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 8px; color: var(--color-text); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; }
.search-link:hover { background: var(--color-green-soft); color: var(--color-text); }
.search-icon { font-size: 1.45rem; line-height: 1; }
.primary-nav { border-top: 1px solid rgb(2 74 60 / 14%); border-bottom: 1px solid rgb(2 74 60 / 18%); background: rgb(255 249 235 / 97%); }
.primary-nav-content { display: flex; min-height: 52px; align-items: center; justify-content: center; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
.primary-nav a { flex: none; padding: 9px 13px; border-radius: 9px; color: var(--color-text-secondary); font-size: 0.77rem; font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; }
.primary-nav a:hover { background: var(--color-green-soft); color: var(--color-text); }
.primary-nav .nav-home { background: var(--color-green-soft); color: var(--color-text); }
footer { padding: 55px 0 22px; border-top: 7px solid var(--color-brand-green); background: var(--color-brand-green); color: var(--color-text-inverse); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 50px; }
.footer-grid .wordmark { color: var(--color-text-inverse); }
.footer-grid .brand-mark { background: var(--color-brand-orange); }
.footer-grid nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
.footer-grid a:not(.wordmark) { display: block; min-height: 38px; font-size: 0.84rem; font-weight: 900; text-transform: uppercase; }
.footer-grid a:hover { color: var(--color-text-inverse); text-decoration: underline; text-decoration-color: var(--color-green-soft); }
.footer-grid p { margin-top: 22px; font-weight: 700; }
.footer-bottom { display: flex; justify-content: space-between; gap: 15px; margin-top: 38px; padding-top: 18px; border-top: 3px solid var(--color-text-inverse); font-size: 0.8rem; font-weight: 900; letter-spacing: 0.03em; text-transform: uppercase; }
@media (max-width: 700px) { .shell { width: calc(100% - 32px); } .utility-content { min-height: 28px; gap: 6px; font-size: 0.5rem; } .publication-tabs { margin-left: -6px; } .publication-tab { padding-inline: 6px; } .utility-publisher { gap: 5px; font-size: 0.43rem; } .vivelanavidad-badge { width: 80px; height: 28px; padding-inline: 8px; margin-right: 0; } .vivelanavidad-badge img { width: 64px; } .blogea-mark { width: 62px; } .brand-row { min-height: 58px; } .brand-mark { width: 36px; height: 36px; border-radius: 10px; } .header-menu nav { left: 0; grid-template-columns: 1fr; } .search-link { width: 42px; justify-content: center; padding-inline: 0; } .search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .primary-nav-content { justify-content: flex-start; min-height: 48px; } .primary-nav a { padding: 8px 11px; font-size: 0.72rem; } .footer-grid { grid-template-columns: 1fr; gap: 30px; } .footer-bottom { flex-wrap: wrap; } }