@font-face {
    font-family: Editorial;
    src: url('../fonts/serif.ttf') format('truetype');
    font-display: swap;
    font-weight: 600 700
}

:root {
    --navy: #142d5a;
    --orange: #ff4b1c;
    --ink: #18212d;
    --muted: #626872;
    --line: #dce0e5;
    --soft: #f3f5f8;
    --serif: Editorial, Georgia, 'Times New Roman', serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px
}

body {
    margin: 0;
    color: var(--ink);
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.55
}

button,
input,
select {
    font: inherit
}

button,
a,
input,
select {
    -webkit-tap-highlight-color: transparent
}

a {
    color: inherit;
    text-decoration: none
}

button {
    cursor: pointer
}

button:disabled {
    cursor: default;
    opacity: .4
}

a,
button {
    touch-action: manipulation
}

a:hover {
    color: var(--navy)
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 4px
}

button {
    color: inherit
}

img {
    max-width: 100%;
    height: auto;
    display: block
}

svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    stroke-width: 1.6;
    fill: none;
    vertical-align: middle;
    flex-shrink: 0
}

h1,
h2,
h3,
p {
    margin: 0
}

h1,
h2,
h3 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.13
}

h1,
h2,
h3,
a,
p {
    overflow-wrap: break-word
}

.container {
    max-width: 1304px;
    padding: 0 32px;
    margin: 0 auto
}

.prototype-bar {
    background: var(--navy);
    color: #fff;
    font-size: 10px;
    letter-spacing: 1px;
    padding: 7px 0
}

.prototype-bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.prototype-bar .container>span:first-child {
    font-weight: 700
}

.status-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    background: var(--orange);
    border-radius: 50%;
    margin: 0 7px 2px 0
}

.utility {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line);
    font-size: 10px;
    padding: 13px 0;
    color: var(--muted);
    letter-spacing: .65px
}

.utility b {
    font-weight: 400;
    color: var(--navy)
}

.utility a {
    display: flex;
    gap: 9px;
    align-items: center;
    text-transform: uppercase
}

.utility svg {
    width: 14px;
    height: 14px
}

.masthead {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 140px;
    gap: 26px
}

.brand {
    width: 500px
}

.brand img {
    width: 100%;
    height: auto
}

.edition-note {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.7
}

.edition-note strong {
    color: var(--navy);
    font-weight: 500
}

.edition-note svg {
    color: var(--orange);
    width: 28px;
    height: 28px
}

.button {
    border: 1px solid var(--navy);
    padding: 11px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #fff;
    font-weight: 600;
    font-size: 12px;
    min-height: 44px;
    transition: background .18s, color .18s
}

.primary {
    background: var(--navy);
    color: #fff
}

.primary:hover {
    background: #213e70;
    color: #fff
}

.edition-cta {
    justify-self: end;
    font-size: 11px
}

.edition-cta svg {
    width: 16px;
    height: 16px
}

.nav-shell {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid var(--line)
}

.navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    border-top: 2px solid var(--navy)
}

.nav-links {
    display: flex;
    align-items: stretch;
    gap: 31px
}

.nav-links a {
    position: relative;
    font-size: 12px;
    font-weight: 600;
    padding: 17px 0;
    white-space: nowrap
}

.nav-links a.active {
    color: var(--navy)
}

.nav-links a.active:after {
    content: '';
    position: absolute;
    bottom: -1px;
    height: 3px;
    left: 0;
    right: 0;
    background: var(--orange)
}

.nav-links a:hover {
    color: #bc3412
}

.nav-search {
    display: flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: 0;
    border-left: 1px solid var(--line);
    padding: 8px 0 8px 22px;
    font-size: 12px
}

.icon-button {
    padding: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    min-width: 44px;
    min-height: 44px
}

.menu-toggle,
.mobile-brand {
    display: none
}

.search-form {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 15px;
    padding-bottom: 15px
}

.search-form input {
    border: 0;
    flex: 1;
    min-width: 0;
    background: var(--soft);
    padding: 12px 15px
}

.search-form>svg {
    flex-shrink: 0
}

.welcome {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 28px 0 23px
}

.eyebrow {
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1.6px;
    font-weight: 700;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 8px
}

.eyebrow:before {
    content: '';
    height: 6px;
    width: 6px;
    background: var(--orange);
    display: inline-block
}

.welcome h1 {
    font-size: 31px;
    letter-spacing: -.8px;
    margin-top: 7px
}

.welcome h1 em {
    font-weight: 400;
    color: var(--navy)
}

.issue-stamp {
    font-size: 10px;
    color: var(--muted);
    text-align: right;
    line-height: 1.8;
    letter-spacing: .8px
}

.issue-stamp b {
    font-weight: 600;
    color: var(--navy)
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr) minmax(0, .85fr);
    gap: 25px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 32px
}

.hero-lead {
    min-width: 0
}

.image-link {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--soft)
}

.image-link img {
    width: 100%;
    object-fit: cover;
    transition: transform .5s
}

.image-link:hover img {
    transform: scale(1.025)
}

.hero-lead .image-link img {
    aspect-ratio: 1.56
}

.image-caption {
    font-size: 9px;
    color: var(--muted);
    margin: 7px 0 15px
}

.label {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--navy);
    text-transform: uppercase
}

.sample-label {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: var(--muted);
    font-weight: 400;
    letter-spacing: .2px;
    text-transform: none
}

.article-labels {
    display: flex;
    gap: 11px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px
}

.hero-lead h2 {
    font-size: 37px;
    letter-spacing: -1.1px;
    margin: 0 0 13px;
    line-height: 1.08
}

.headline-link:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px
}

.dek {
    font-size: 13px;
    line-height: 1.65;
    color: var(--muted)
}

.meta {
    color: var(--muted);
    font-size: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 15px
}

.meta span+span:before {
    content: '·';
    margin-right: 8px
}

.hero-middle {
    border-right: 1px solid var(--line);
    border-left: 1px solid var(--line);
    padding: 0 24px
}

.hero-middle .image-link img {
    aspect-ratio: 1.45
}

.hero-middle .article-labels {
    margin-top: 16px
}

.hero-middle h2 {
    font-size: 24px;
    letter-spacing: -.4px;
    line-height: 1.15
}

.hero-middle .sub-story {
    border-top: 1px solid var(--line);
    margin-top: 23px;
    padding-top: 8px
}

.hero-middle .sub-story h2 {
    font-size: 22px
}

.hero-middle .dek {
    margin-top: 12px;
    font-size: 12px
}

.brief-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 3px solid var(--navy);
    padding: 12px 0 10px
}

.brief-heading h2 {
    font-family: Arial;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px
}

.brief-heading svg {
    color: var(--orange)
}

.brief-note {
    color: var(--muted);
    font-size: 10px;
    margin-bottom: 3px
}

.brief-item {
    display: grid;
    grid-template-columns: 25px 1fr;
    gap: 8px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line)
}

.brief-number {
    color: var(--orange);
    font-family: var(--serif);
    font-size: 23px;
    line-height: 1
}

.brief-item h3 {
    font-size: 17px;
    line-height: 1.23;
    margin-top: 5px
}

.brief-item .label {
    font-size: 8px;
    letter-spacing: 1px
}

.brief-item .meta {
    margin-top: 8px;
    font-size: 9px
}

.all-stories {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--navy);
    margin-top: 16px;
    padding: 8px 0
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 25px;
    gap: 20px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 16px
}

.section-heading h2 {
    font-size: 28px;
    letter-spacing: -.6px
}

.section-heading p {
    font-size: 12px;
    color: var(--muted);
    margin-top: 8px
}

.more-section {
    margin-top: 40px
}

.filter-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 25px
}

.filter {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 2px;
    padding: 9px 14px;
    font-size: 11px;
    min-height: 38px
}

.filter:hover {
    border-color: var(--navy)
}

.filter.active {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy)
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 29px
}

.story-card .image-link img {
    aspect-ratio: 1.85
}

.story-card .article-labels {
    margin-top: 16px
}

.story-card h3 {
    font-size: 24px;
    letter-spacing: -.5px;
    line-height: 1.15
}

.story-card .dek {
    font-size: 12px;
    margin-top: 12px
}

.story-card .meta {
    margin-top: 12px
}

.card-art {
    display: flex;
    aspect-ratio: 1.85;
    background: var(--soft);
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    color: var(--navy)
}

.card-art:before {
    content: '';
    position: absolute;
    width: 160px;
    height: 160px;
    border: 1px solid #aebaca;
    border-radius: 100%
}

.card-art>svg {
    width: 65px;
    height: 65px;
    stroke-width: 1
}

.card-art:after {
    content: 'ILUSTRACIÓN EDITORIAL';
    position: absolute;
    bottom: 10px;
    left: 14px;
    font-size: 8px;
    letter-spacing: 1.5px
}

.art-deportes {
    background: #eef2ed
}

.art-politica {
    background: #f1f3f6
}

.art-sobremesa {
    background: #f9f1ea
}

.print-promo {
    margin: 48px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--navy);
    color: #fff;
    min-height: 260px;
    overflow: hidden
}

.print-promo-text {
    padding: 36px 40px
}

.print-promo .eyebrow {
    color: #d6deeb;
    font-size: 9px
}

.print-promo h2 {
    font-size: 33px;
    letter-spacing: -.5px;
    max-width: 420px;
    margin: 15px 0 12px;
    line-height: 1.12
}

.print-promo p {
    color: #d3dbe9;
    font-size: 12px;
    max-width: 360px
}

.print-promo .button {
    background: #fff;
    color: var(--navy);
    margin-top: 22px
}

.paper-scene {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    background: #203b66;
    padding-top: 35px
}

.mini-paper {
    background: #fff;
    color: var(--navy);
    width: 260px;
    padding: 16px 15px 10px;
    box-shadow: 0 8px 20px #08132955;
    transform: rotate(-8deg);
    margin-bottom: -50px
}

.mini-paper img {
    width: 100%
}

.mini-paper .mini-rule {
    border-top: 1px solid var(--navy);
    font-size: 5px;
    letter-spacing: .5px;
    margin: 7px 0;
    padding-top: 4px
}

.mini-paper h3 {
    font-size: 20px;
    margin: 9px 0;
    letter-spacing: -.4px
}

.mini-paper .mini-photo {
    height: 94px;
    object-fit: cover;
    margin-bottom: 10px
}

.mini-columns {
    columns: 2;
    column-gap: 10px;
    font-size: 5px;
    line-height: 1.4
}

.scene-stamp {
    position: absolute;
    right: 20px;
    top: 22px;
    text-transform: uppercase;
    font-size: 8px;
    letter-spacing: 1px;
    color: #d6deeb;
    writing-mode: vertical-rl
}

.site-footer {
    border-top: 3px solid var(--navy);
    padding: 29px 0 18px;
    background: #fff
}

.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding-bottom: 28px
}

.footer-top img {
    width: 260px;
    height: auto
}

.footer-top p {
    font-size: 11px;
    line-height: 1.9;
    color: var(--muted)
}

.footer-top p strong {
    font-weight: 400;
    color: var(--navy)
}

.footer-top>a:last-child {
    display: flex;
    gap: 18px;
    font-weight: 600;
    font-size: 11px;
    color: var(--navy)
}

.footer-bottom {
    display: flex;
    gap: 30px;
    border-top: 1px solid var(--line);
    padding-top: 18px;
    font-size: 10px;
    color: var(--muted);
    align-items: center
}

.footer-bottom>span {
    margin-right: auto
}

.text-button {
    background: none;
    border: 0;
    padding: 6px 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: inherit
}

.page-top {
    margin: 32px 0 30px
}

.breadcrumb {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--muted);
    margin-bottom: 22px
}

.breadcrumb a {
    text-decoration: underline;
    text-underline-offset: 3px
}

.page-top h1 {
    font-size: 46px;
    letter-spacing: -1.4px;
    color: var(--navy);
    margin-bottom: 12px
}

.page-top p {
    font-size: 14px;
    color: var(--muted)
}

.results-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    border-block: 1px solid var(--line);
    padding: 15px 0;
    margin-bottom: 25px;
    font-size: 12px;
    color: var(--muted)
}

.results-toolbar select {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    padding: 9px;
    font-size: 12px
}

.listing {
    padding-bottom: 50px
}

.listing .cards {
    row-gap: 36px
}

.listing-search {
    display: flex;
    border: 1px solid var(--line);
    padding: 7px;
    gap: 10px;
    align-items: center;
    margin: 24px 0
}

.listing-search>svg {
    margin-left: 10px
}

.listing-search input {
    border: 0;
    min-width: 0;
    flex: 1;
    padding: 8px;
    font-size: 15px
}

.empty-state {
    padding: 48px 25px;
    background: var(--soft);
    text-align: center;
    grid-column: 1/-1
}

.empty-state>svg {
    width: 35px;
    height: 35px;
    margin-bottom: 18px;
    color: var(--navy)
}

.empty-state h2 {
    font-size: 29px;
    margin-bottom: 12px
}

.empty-state p {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 23px
}

.article-page {
    padding: 30px 0 45px
}

.article-layout {
    max-width: 980px;
    margin: 0 auto
}

.article-head {
    max-width: 820px;
    margin: 0 auto 30px
}

.article-head h1 {
    font-size: 50px;
    letter-spacing: -1.4px;
    line-height: 1.08;
    margin: 16px 0 20px
}

.article-head .article-dek {
    font-size: 18px;
    color: var(--muted);
    line-height: 1.6
}

.article-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-block: 1px solid var(--line);
    padding: 12px 0;
    margin-top: 25px;
    gap: 14px
}

.article-actions .meta {
    margin: 0;
    flex-wrap: wrap
}

.action-buttons {
    display: flex;
    gap: 5px
}

.action-buttons .button {
    font-size: 11px;
    padding: 8px 12px;
    min-height: 40px
}

.action-buttons [aria-pressed=true] {
    background: var(--navy);
    color: #fff
}

.article-figure {
    margin: 0 0 26px
}

.article-figure img {
    width: 100%;
    max-height: 470px;
    object-fit: cover
}

.article-figure .card-art {
    aspect-ratio: 2.7
}

.article-figure figcaption {
    font-size: 10px;
    margin-top: 8px;
    color: var(--muted)
}

.article-body {
    max-width: 680px;
    margin: 0 auto;
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.85
}

.article-body p {
    margin-bottom: 23px
}

.article-body .demo-notice {
    font-family: Arial;
    font-size: 12px;
    line-height: 1.65;
    background: var(--soft);
    border-left: 3px solid var(--orange);
    padding: 17px 20px;
    margin: 25px 0
}

.article-body h2 {
    font-size: 29px;
    margin: 31px 0 16px
}

.article-body blockquote {
    font-size: 29px;
    color: var(--navy);
    line-height: 1.3;
    border-left: 2px solid var(--orange);
    padding: 5px 0 5px 25px;
    margin: 30px 0
}

.article-bottom {
    border-top: 1px solid var(--line);
    margin-top: 45px;
    padding-top: 25px
}

.article-bottom h2 {
    font-size: 27px;
    margin-bottom: 25px
}

.edition-page {
    padding-bottom: 45px
}

.edition-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--soft);
    padding: 12px 18px;
    margin-bottom: 25px;
    gap: 12px;
    font-size: 12px
}

.page-controls {
    display: flex;
    align-items: center;
    gap: 14px
}

.newspaper {
    max-width: 830px;
    margin: 0 auto;
    padding: 38px 42px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 8px 30px #142d5a09;
    color: var(--ink)
}

.paper-logo {
    width: 100%;
    max-width: 590px;
    margin: 0 auto 20px
}

.paper-meta {
    display: flex;
    justify-content: space-between;
    border-block: 1px solid var(--navy);
    padding: 8px 0;
    font-size: 9px;
    letter-spacing: .5px
}

.newspaper h2 {
    font-size: 50px;
    letter-spacing: -1.3px;
    margin: 20px 0 15px
}

.paper-intro {
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 20px
}

.paper-photo {
    width: 100%;
    height: 315px;
    object-fit: cover
}

.paper-columns {
    columns: 2;
    gap: 30px;
    margin-top: 22px;
    font-family: var(--serif);
    font-size: 14px;
    line-height: 1.55;
    text-align: justify
}

.paper-columns p {
    margin-bottom: 15px
}

.paper-columns h3 {
    font-size: 24px;
    margin-bottom: 10px
}

.paper-bottom {
    margin-top: 20px;
    border-top: 2px solid var(--navy);
    padding-top: 10px;
    color: var(--navy);
    font-size: 10px;
    display: flex;
    justify-content: space-between
}

.paper-stories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-top: 25px
}

.paper-stories h3 {
    font-size: 27px;
    margin: 12px 0
}

.paper-stories p {
    font-size: 13px;
    line-height: 1.65
}

.paper-stories>div {
    border-top: 2px solid var(--navy);
    padding-top: 15px
}

.paper-stories .card-art {
    margin-top: 15px
}

.page-caption {
    text-align: center;
    margin-top: 22px;
    color: var(--muted);
    font-size: 12px
}

.toast {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 80;
    background: var(--navy);
    color: #fff;
    padding: 14px 23px;
    font-size: 13px;
    max-width: calc(100% - 30px);
    box-shadow: 0 4px 24px #0002
}

dialog {
    border: 1px solid var(--line);
    padding: 28px;
    width: min(560px, calc(100% - 32px));
    max-height: 85vh;
    color: var(--ink)
}

dialog::backdrop {
    background: #10254480
}

.dialog-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px
}

.dialog-heading h2 {
    font-size: 28px
}

dialog p {
    font-size: 13px;
    line-height: 1.75;
    margin: 14px 0
}

dialog h3 {
    margin-top: 22px;
    font-size: 21px
}

dialog p a {
    text-decoration: underline;
    color: var(--navy)
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.skip-link {
    position: fixed;
    top: -100px;
    left: 15px;
    padding: 12px 18px;
    z-index: 100;
    background: #fff;
    color: var(--navy)
}

.skip-link:focus {
    top: 10px
}

[hidden] {
    display: none !important
}

@media(min-width:1450px) {
    .container {
        max-width: 1370px
    }

    .hero-lead h2 {
        font-size: 40px
    }

    .hero-middle h2 {
        font-size: 26px
    }

    .hero-middle .sub-story h2 {
        font-size: 24px
    }
}

@media(max-width:1100px) {
    .container {
        padding-inline: 24px
    }

    .brand {
        width: 410px
    }

    .edition-note {
        font-size: 9px
    }

    .edition-note svg {
        display: none
    }

    .masthead {
        gap: 18px
    }

    .nav-links {
        gap: 22px
    }

    .hero-grid {
        grid-template-columns: 1.8fr 1fr;
        gap: 23px
    }

    .hero-middle {
        border-right: 0;
        padding-right: 0
    }

    .hero-briefs {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0 22px
    }

    .brief-heading,
    .brief-note {
        grid-column: 1/-1
    }

    .brief-heading {
        margin-top: 7px
    }

    .brief-item {
        padding: 14px 0
    }

    .hero-briefs>.brief-item:nth-of-type(5) {
        display: none
    }

    .hero-briefs>.all-stories {
        grid-column: 1/-1;
        margin: 6px 0 0
    }

    .hero-lead h2 {
        font-size: 36px
    }

    .print-promo h2 {
        font-size: 30px
    }

    .footer-top img {
        width: 225px
    }
}

@media(max-width:780px) {
    .container {
        padding-inline: 20px
    }

    .prototype-bar {
        font-size: 8px;
        letter-spacing: .7px
    }

    .prototype-bar .container>span:last-child {
        letter-spacing: 0
    }

    .utility {
        font-size: 8px;
        letter-spacing: .3px
    }

    .utility>span:first-child {
        display: none
    }

    .utility a {
        font-size: 9px
    }

    .utility b {
        display: none
    }

    .masthead {
        grid-template-columns: 1fr auto;
        min-height: 109px;
        gap: 15px
    }

    .brand {
        width: min(400px, 100%)
    }

    .edition-note {
        display: none
    }

    .edition-cta {
        padding: 10px;
        font-size: 10px;
        gap: 7px
    }

    .edition-cta svg:last-child {
        display: none
    }

    .nav-links {
        gap: 19px
    }

    .nav-links a {
        font-size: 11px
    }

    .nav-search {
        padding-left: 14px
    }

    .nav-search>span:last-child {
        display: none
    }

    .hero-grid {
        gap: 20px;
        grid-template-columns: 1.65fr 1fr
    }

    .hero-middle {
        padding-left: 20px
    }

    .hero-lead h2 {
        font-size: 30px
    }

    .hero-middle h2 {
        font-size: 22px
    }

    .hero-middle .sub-story h2 {
        font-size: 20px
    }

    .hero-lead .image-link img {
        aspect-ratio: 1.3
    }

    .hero-middle .image-link img {
        aspect-ratio: 1.25
    }

    .hero-briefs {
        grid-template-columns: repeat(3, 1fr);
        gap: 0 16px
    }

    .brief-item h3 {
        font-size: 16px
    }

    .cards {
        gap: 22px;
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .more-section .cards .story-card:last-child {
        display: none
    }

    .story-card h3 {
        font-size: 23px
    }

    .print-promo-text {
        padding: 29px
    }

    .print-promo {
        grid-template-columns: 1.2fr 1fr
    }

    .mini-paper {
        width: 215px
    }

    .print-promo h2 {
        font-size: 29px
    }

    .footer-top {
        flex-wrap: wrap;
        gap: 20px
    }

    .footer-top p {
        font-size: 10px
    }

    .footer-top>a:last-child {
        display: none
    }

    .footer-bottom {
        gap: 15px;
        font-size: 9px;
        flex-wrap: wrap
    }

    .footer-bottom>span {
        width: 100%
    }

    .article-head h1 {
        font-size: 40px
    }

    .article-body {
        font-size: 18px
    }

    .article-actions {
        flex-wrap: wrap
    }

    .article-head .article-dek {
        font-size: 16px
    }

    .newspaper {
        padding: 25px
    }

    .newspaper h2 {
        font-size: 40px
    }

    .paper-photo {
        height: 250px
    }

    .welcome {
        margin-top: 24px
    }

    .welcome h1 {
        font-size: 29px
    }

    .issue-stamp {
        font-size: 9px
    }

    .page-top h1 {
        font-size: 40px
    }

    .section-heading h2 {
        font-size: 26px
    }
}

@media(max-width:600px) {
    .container {
        padding-inline: 18px
    }

    .prototype-bar .container {
        justify-content: center;
        gap: 10px
    }

    .prototype-bar .container>span:last-child {
        font-size: 8px
    }

    .prototype-bar .container>span:last-child {
        max-width: 174px;
        overflow: hidden;
        white-space: nowrap
    }

    .utility {
        padding: 10px 0;
        font-size: 8px
    }

    .utility a {
        font-size: 8px
    }

    .masthead {
        grid-template-columns: 1fr;
        min-height: 106px;
        justify-items: center
    }

    .brand {
        width: min(370px, 100%)
    }

    .edition-cta {
        display: none
    }

    .navigation {
        min-height: 52px;
        padding-inline: 9px;
        position: relative
    }

    .menu-toggle,
    .mobile-brand {
        display: flex
    }

    .mobile-brand {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 44px;
        justify-content: center
    }

    .mobile-brand img {
        height: 29px;
        width: auto;
        object-fit: contain
    }

    .nav-links {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 51px;
        box-shadow: 0 9px 15px #142d5a12;
        background: #fff;
        padding: 8px 18px 15px;
        border-bottom: 2px solid var(--navy);
        max-height: 70vh;
        overflow-y: auto
    }

    .nav-links.open {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 22px
    }

    .nav-links a {
        padding: 16px 5px;
        font-size: 13px;
        border-bottom: 1px solid var(--line)
    }

    .nav-links a.active:after {
        bottom: -1px
    }

    .nav-search {
        border: 0;
        padding: 12px;
        min-height: 44px
    }

    .nav-search>span:last-child {
        display: block;
        font-size: 11px
    }

    .welcome {
        margin: 24px 0 22px
    }

    .welcome h1 {
        font-size: 29px;
        margin-top: 10px
    }

    .issue-stamp {
        display: none
    }

    .eyebrow {
        font-size: 9px;
        letter-spacing: 1.4px
    }

    .hero-grid {
        display: block;
        padding-bottom: 24px
    }

    .hero-lead .image-link img {
        aspect-ratio: 1.55
    }

    .hero-lead h2 {
        font-size: 34px;
        line-height: 1.1;
        letter-spacing: -.9px
    }

    .hero-lead .dek {
        font-size: 14px
    }

    .image-caption {
        font-size: 8px;
        margin: 6px 0 17px
    }

    .article-labels {
        gap: 8px;
        margin-bottom: 10px
    }

    .hero-lead .meta {
        margin-top: 14px
    }

    .hero-middle {
        border: 0;
        border-top: 1px solid var(--line);
        padding: 24px 0 0;
        margin-top: 24px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px
    }

    .hero-middle .image-link img {
        aspect-ratio: 1.45
    }

    .hero-middle .article-labels {
        margin-top: 13px
    }

    .hero-middle h2,
    .hero-middle .sub-story h2 {
        font-size: 21px;
        letter-spacing: -.3px
    }

    .hero-middle .sub-story {
        margin: 0;
        border: 0;
        padding: 0 0 0 18px;
        border-left: 1px solid var(--line)
    }

    .hero-middle .sub-story .article-labels {
        margin-top: 0
    }

    .hero-middle .dek {
        font-size: 12px
    }

    .hero-middle .meta {
        flex-wrap: wrap;
        font-size: 9px;
        gap: 4px
    }

    .hero-briefs {
        display: block;
        margin-top: 27px
    }

    .brief-heading {
        margin-top: 0
    }

    .brief-item {
        grid-template-columns: 31px 1fr;
        padding: 16px 0;
        gap: 10px
    }

    .brief-item h3 {
        font-size: 20px
    }

    .brief-number {
        font-size: 26px
    }

    .brief-item .meta {
        margin-top: 5px
    }

    .brief-item .label {
        font-size: 9px
    }

    .hero-briefs>.brief-item:nth-of-type(5) {
        display: grid
    }

    .hero-briefs .all-stories {
        margin-top: 13px
    }

    .more-section {
        margin-top: 32px
    }

    .section-heading {
        gap: 10px;
        padding-bottom: 15px;
        align-items: center
    }

    .section-heading h2 {
        font-size: 26px;
        max-width: 230px
    }

    .section-heading .all-stories {
        display: none
    }

    .section-heading p {
        font-size: 12px
    }

    .filter-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 3px 3px 9px;
        margin-inline: -3px;
        margin-bottom: 19px;
        scrollbar-width: thin
    }

    .filter {
        flex-shrink: 0;
        padding: 9px 13px;
        min-height: 40px
    }

    .cards {
        grid-template-columns: 1fr;
        gap: 27px
    }

    .story-card {
        padding-bottom: 25px;
        border-bottom: 1px solid var(--line)
    }

    .story-card .image-link img {
        aspect-ratio: 1.85
    }

    .story-card h3 {
        font-size: 27px
    }

    .story-card .dek {
        font-size: 13px
    }

    .more-section .cards .story-card:last-child {
        display: block
    }

    .print-promo {
        margin: 35px 0;
        grid-template-columns: 1fr
    }

    .print-promo-text {
        padding: 29px 26px 30px
    }

    .print-promo h2 {
        font-size: 33px;
        max-width: 300px
    }

    .print-promo p {
        font-size: 13px
    }

    .paper-scene {
        height: 200px;
        padding-top: 25px
    }

    .mini-paper {
        width: 240px;
        transform: rotate(-6deg)
    }

    .scene-stamp {
        right: 27px
    }

    .footer-top {
        display: block;
        padding-bottom: 22px
    }

    .footer-top img {
        width: 250px;
        margin-bottom: 19px
    }

    .footer-top p {
        font-size: 12px
    }

    .footer-bottom {
        font-size: 10px;
        gap: 10px 24px
    }

    .footer-bottom>span {
        line-height: 1.7
    }

    .search-form {
        gap: 8px;
        padding-block: 12px
    }

    .search-form>svg {
        display: none
    }

    .search-form input {
        font-size: 13px;
        padding: 11px;
        min-width: 0
    }

    .search-form .button {
        padding: 10px
    }

    .search-form .icon-button {
        min-width: 32px;
        padding: 6px
    }

    .page-top {
        margin: 26px 0 22px
    }

    .page-top h1 {
        font-size: 39px;
        line-height: 1.12
    }

    .page-top p {
        font-size: 13px
    }

    .breadcrumb {
        font-size: 10px;
        gap: 7px
    }

    .listing-search {
        gap: 5px;
        margin: 20px 0
    }

    .listing-search>svg {
        display: none
    }

    .listing-search input {
        font-size: 14px
    }

    .listing-search .button {
        padding: 10px 14px
    }

    .results-toolbar {
        font-size: 11px;
        align-items: start;
        flex-wrap: wrap
    }

    .results-toolbar select {
        font-size: 11px
    }

    .listing .cards {
        gap: 24px
    }

    .article-page {
        padding-top: 24px
    }

    .article-head h1 {
        font-size: 38px;
        letter-spacing: -1px
    }

    .article-head .article-dek {
        font-size: 16px
    }

    .article-actions {
        display: block
    }

    .article-actions .meta {
        font-size: 10px
    }

    .action-buttons {
        margin-top: 14px
    }

    .article-figure img {
        max-height: 300px
    }

    .article-body {
        font-size: 18px;
        line-height: 1.8
    }

    .article-body blockquote {
        font-size: 26px
    }

    .article-body .demo-notice {
        padding: 14px 15px
    }

    .article-bottom .cards {
        grid-template-columns: 1fr
    }

    .edition-controls {
        flex-wrap: wrap;
        padding: 9px 10px
    }

    .edition-controls>.button {
        width: 100%
    }

    .page-controls {
        width: 100%;
        justify-content: center
    }

    .newspaper {
        padding: 16px 14px
    }

    .paper-logo {
        margin-bottom: 12px
    }

    .paper-meta {
        font-size: 6px;
        gap: 8px
    }

    .newspaper h2 {
        font-size: 30px;
        letter-spacing: -.7px;
        margin: 16px 0 12px
    }

    .paper-intro {
        font-size: 14px
    }

    .paper-photo {
        height: 175px
    }

    .paper-columns {
        columns: 1;
        font-size: 14px;
        line-height: 1.65
    }

    .paper-stories {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .paper-stories h3 {
        font-size: 26px
    }

    .paper-bottom {
        font-size: 8px
    }

    .page-caption {
        font-size: 11px
    }

    .page-top .eyebrow {
        margin-bottom: 14px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *:before,
    *:after {
        transition: none !important;
        animation: none !important
    }
}

@media print {

    .prototype-bar,
    .site-header,
    .nav-shell,
    .site-footer,
    .article-actions,
    .breadcrumb,
    .article-bottom,
    .edition-controls,
    .page-top,
    .page-caption,
    .toast,
    .skip-link,
    dialog {
        display: none !important
    }

    .container {
        max-width: none;
        padding: 0
    }

    .article-page,
    .edition-page {
        padding: 0
    }

    .article-head h1 {
        font-size: 30pt
    }

    .article-head .article-dek {
        font-size: 13pt
    }

    .article-body {
        font-size: 12pt;
        max-width: none
    }

    .article-body .demo-notice {
        border: 1px solid #777
    }

    .article-figure img {
        max-height: 230px
    }

    .newspaper {
        border: 0;
        box-shadow: none;
        max-width: none;
        padding: 0
    }

    .newspaper h2 {
        font-size: 32pt
    }

    .paper-photo {
        height: 250px
    }

    .paper-columns {
        font-size: 10pt
    }

    .paper-bottom {
        font-size: 8pt
    }

    .article-page:before {
        content: 'ELVESPERTINO · CONTENIDO DE MUESTRA · PROTOTIPO PRIVADO';
        display: block;
        font: 9pt Arial;
        margin-bottom: 18px
    }

    .paper-stories {
        display: grid;
        grid-template-columns: 1fr 1fr
    }

    .paper-stories h3 {
        font-size: 20pt
    }

    a {
        color: inherit !important
    }

    @page {
        size: A4;
        margin: 15mm
    }
}

/* Review controls and the two editorial directions. */
.design-review {
    background: #f0f3f8;
    border-bottom: 1px solid #dbe2ec;
    padding: 9px 0
}

.design-review>.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px
}

.design-review>.container>span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.7px;
    color: #586579
}

.design-review [role=group] {
    display: flex;
    gap: 7px
}

.design-review button {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    background: transparent;
    padding: 7px 12px;
    font-size: 11px;
    min-height: 35px
}

.design-review button b {
    font-size: 10px;
    border: 1px solid #bbc6d5;
    padding: 0 5px
}

.design-review button[aria-pressed=true] {
    background: #fff;
    border-color: #b6c3d6;
    color: var(--navy)
}

.design-review small {
    font-size: 8px;
    color: #687389
}

.service-nav {
    display: flex;
    gap: 22px;
    align-items: center;
    min-height: 42px;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    white-space: nowrap;
    font-size: 10px;
    color: var(--muted);
    scrollbar-width: thin
}

.service-nav>span {
    font-size: 8px;
    letter-spacing: 1px;
    font-weight: 700;
    color: var(--orange)
}

.service-nav a:hover {
    text-decoration: underline;
    color: var(--navy)
}

.source-photo {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: var(--soft)
}

.image-link .source-photo img,
.article-figure .source-photo img {
    position: absolute;
    max-width: none;
    height: auto;
    aspect-ratio: auto;
    object-fit: initial;
    max-height: none;
    transform: none
}

.hero-lead .source-photo {
    aspect-ratio: 1.8 !important
}

.hero-lead .source-photo img {
    top: -54% !important;
    width: 130% !important;
    left: -17% !important
}

.hero-middle .source-photo {
    aspect-ratio: 1.5 !important
}

.hero-middle .source-photo img {
    width: 245% !important;
    left: -65% !important;
    top: -49% !important
}

.story-card .source-photo {
    aspect-ratio: 1.85 !important
}

.story-card .source-photo img {
    max-height: none
}

.story-card .infographic-photo img {
    top: -27% !important
}

.article-figure .infographic-photo {
    width: min(100%, 760px);
    margin-inline: auto
}

.service-section {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 30px;
    margin: 48px 0
}

.weather-panel {
    border: 1px solid var(--line);
    padding: 24px 25px;
    background: #fff
}

.weather-panel .section-heading {
    margin-bottom: 8px;
    gap: 15px
}

.weather-panel h2 {
    font-size: 26px;
    margin-top: 8px
}

.demo-pill {
    font-size: 8px;
    white-space: nowrap;
    padding: 5px 7px;
    background: var(--soft);
    color: #586273
}

.weather-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: center
}

.weather-map {
    position: relative;
    min-width: 0
}

.weather-map>img {
    width: 100%;
    height: 260px;
    object-fit: contain
}

.weather-map>button {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 6px solid #fff;
    background: var(--orange);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--orange);
    transform: translate(-50%, -50%);
    min-height: 22px
}

.weather-map>button:before {
    content: '';
    position: absolute;
    inset: -12px
}

.weather-info label {
    display: block;
    font-size: 9px;
    letter-spacing: .6px;
    color: var(--muted);
    margin: 0 0 7px
}

.weather-info select {
    border: 1px solid var(--line);
    background: #fff;
    padding: 9px;
    width: 100%;
    font-size: 11px;
    color: var(--navy)
}

.weather-days {
    display: flex;
    border-bottom: 1px solid var(--line);
    margin: 13px 0 7px
}

.weather-days button {
    border: 0;
    background: none;
    color: var(--muted);
    padding: 9px 13px;
    font-size: 10px;
    min-height: 36px
}

.weather-days [aria-pressed=true] {
    color: var(--navy);
    border-bottom: 2px solid var(--orange);
    font-weight: 700
}

.weather-temp {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 9px 0
}

.weather-temp>svg {
    width: 34px;
    height: 34px;
    color: #c87b32
}

.weather-temp>strong {
    font-family: var(--serif);
    font-size: 45px;
    font-weight: 500;
    color: var(--navy)
}

.weather-temp>span {
    font-size: 9px;
    color: var(--muted);
    line-height: 1.8
}

.weather-temp b {
    font-weight: 400;
    color: var(--navy)
}

.weather-rain {
    font-size: 10px;
    color: var(--navy)
}

.weather-rain span {
    font-size: 8px;
    color: var(--muted)
}

.weather-disclaimer {
    font-size: 9px;
    line-height: 1.6;
    color: var(--muted);
    border-top: 1px solid var(--line);
    padding-top: 12px;
    margin-top: 13px
}

.edition-feature {
    background: var(--navy);
    color: #fff;
    padding: 28px 28px 25px;
    position: relative;
    overflow: hidden;
    min-height: 370px
}

.edition-feature>.eyebrow {
    color: #d9e2ef;
    font-size: 9px
}

.edition-feature h2 {
    font-size: 30px;
    margin: 18px 0 12px;
    max-width: 230px;
    position: relative;
    z-index: 1
}

.edition-feature p {
    font-size: 12px;
    line-height: 1.7;
    max-width: 195px;
    position: relative;
    z-index: 1;
    color: #d5ddec
}

.edition-feature .button {
    position: relative;
    z-index: 2;
    background: #fff;
    color: var(--navy);
    margin-top: 23px
}

.paper-cover-link {
    position: absolute;
    width: 195px;
    right: -12px;
    bottom: -32px;
    transform: rotate(9deg);
    box-shadow: 0 0 24px #0004
}

.original-edition {
    max-width: 830px;
    margin: 0 auto;
    background: #f4f5f7;
    padding: 14px;
    border: 1px solid var(--line);
    overflow: auto
}

.original-edition>img {
    width: 100%;
    height: auto
}

.original-edition.zoomed {
    max-width: 100%;
    max-height: 80vh
}

.original-edition.zoomed>img {
    width: 1582px;
    max-width: none
}

.edition-thumbs {
    display: flex;
    max-width: 700px;
    margin: 25px auto 0;
    gap: 16px;
    justify-content: center
}

.edition-thumbs>a {
    border: 1px solid var(--line);
    padding: 5px;
    width: 110px;
    font-size: 10px;
    text-align: center;
    color: var(--muted)
}

.edition-thumbs>a.active {
    border: 2px solid var(--navy);
    color: var(--navy);
    padding: 4px
}

.edition-thumbs img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    object-position: top
}

.edition-thumbs span {
    display: block;
    padding: 8px 0 3px
}

.zodiac-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.zodiac-grid article {
    border-top: 2px solid var(--navy);
    padding: 20px;
    background: #fafbfc
}

.zodiac-grid article>span {
    color: var(--orange);
    font-family: var(--serif);
    font-size: 22px
}

.zodiac-grid h2 {
    font-size: 29px;
    margin: 10px 0
}

.zodiac-grid p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.75
}

.zodiac-grid small {
    font-size: 9px;
    display: block;
    color: var(--muted);
    margin-top: 15px
}

.route-empty {
    margin: 40px 0
}

.route-empty h1 {
    font-size: 36px;
    margin-bottom: 15px
}

.page-top>.eyebrow {
    margin-bottom: 12px
}

.article-figure>.source-photo:not(.infographic-photo) {
    aspect-ratio: 2.15 !important
}

.article-figure>.source-photo:not(.infographic-photo) img {
    top: var(--crop-y) !important
}

.card-art.art-coffee {
    background: #f5eee8
}

.card-art.art-sport {
    background: #e8efea
}

.card-art.art-world {
    background: #eaf0f7
}

.card-art.art-column {
    background: #eef1f7
}

body[data-design=b] .welcome {
    border-bottom: 0;
    margin: 30px 0 25px
}

body[data-design=b] .welcome h1 {
    font-size: 40px
}

body[data-design=b] .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 26px
}

body[data-design=b] .hero-lead {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 0 35px;
    padding: 0 0 30px;
    border-bottom: 1px solid var(--line)
}

body[data-design=b] .hero-lead>.image-link {
    grid-column: 2;
    grid-row: 1/6
}

body[data-design=b] .hero-lead .source-photo {
    aspect-ratio: 1.52 !important;
    height: 100%
}

body[data-design=b] .hero-lead .source-photo img {
    width: 147% !important;
    left: -26% !important;
    top: -43% !important
}

body[data-design=b] .hero-lead>.image-caption {
    grid-column: 2;
    grid-row: 6;
    margin: 7px 0 0
}

body[data-design=b] .hero-lead>.article-labels {
    grid-column: 1;
    grid-row: 1;
    margin: 10px 0 18px;
    align-self: start
}

body[data-design=b] .hero-lead>h2 {
    grid-column: 1;
    grid-row: 2;
    font-size: 46px;
    line-height: 1.03;
    letter-spacing: -1.5px
}

body[data-design=b] .hero-lead>.dek {
    grid-column: 1;
    grid-row: 3;
    font-size: 15px;
    line-height: 1.7;
    margin-top: 10px
}

body[data-design=b] .hero-lead>.meta {
    grid-column: 1;
    grid-row: 4;
    margin-top: 20px
}

body[data-design=b] .hero-middle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 0;
    padding: 0;
    gap: 25px
}

body[data-design=b] .hero-middle .sub-story {
    margin: 0;
    padding: 0 0 0 20px;
    border-top: 0;
    border-left: 1px solid var(--line)
}

body[data-design=b] .hero-middle .sub-story .article-labels {
    margin-top: 0
}

body[data-design=b] .hero-briefs {
    border-left: 1px solid var(--line);
    padding-left: 25px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px
}

body[data-design=b] .brief-heading {
    grid-column: 1/-1;
    padding: 0 0 10px;
    border-top: 0
}

body[data-design=b] .brief-note {
    grid-column: 1/-1
}

body[data-design=b] .hero-briefs .brief-item {
    grid-template-columns: 22px 1fr;
    padding: 12px 0
}

body[data-design=b] .hero-briefs .brief-item:nth-of-type(4) {
    display: none
}

body[data-design=b] .hero-briefs .all-stories {
    grid-column: 1/-1;
    margin-top: 4px
}

body[data-design=b] .section-heading h2 {
    font-size: 32px
}

body[data-design=b] .story-card h3 {
    font-size: 27px
}

body[data-design=b] .service-section {
    background: #f4f6f8;
    padding: 25px;
    gap: 25px
}

body[data-design=b] .weather-panel {
    border: 0
}

body[data-design=b] .more-section {
    margin-top: 44px
}

@media(max-width:1100px) {
    .nav-links {
        gap: 19px
    }

    .nav-links a {
        font-size: 11px
    }

    .service-section {
        grid-template-columns: 1.35fr 1fr;
        gap: 20px
    }

    .weather-panel {
        padding: 22px 20px
    }

    .weather-layout {
        gap: 12px
    }

    .weather-panel h2 {
        font-size: 23px
    }

    .weather-panel .section-heading {
        flex-wrap: wrap
    }

    .paper-cover-link {
        width: 155px;
        right: -45px;
        bottom: -10px
    }

    .edition-feature h2 {
        font-size: 29px
    }

    .weather-temp {
        gap: 7px
    }

    .weather-temp>svg {
        width: 27px
    }

    .weather-temp>strong {
        font-size: 38px
    }

    body[data-design=b] .hero-lead>h2 {
        font-size: 39px
    }

    body[data-design=b] .hero-briefs {
        grid-column: auto
    }

    body[data-design=b] .hero-middle h2 {
        font-size: 22px
    }

    body[data-design=b] .brief-heading {
        margin-top: 0
    }

    body[data-design=b] .hero-grid {
        grid-template-columns: 1.1fr 1fr
    }
}

@media(max-width:780px) {
    .design-review small {
        display: none
    }

    .design-review>.container {
        gap: 12px
    }

    .design-review>.container>span {
        font-size: 8px;
        letter-spacing: .8px
    }

    .design-review button {
        padding: 6px 8px;
        font-size: 10px
    }

    .nav-links {
        gap: 12px
    }

    .nav-links a {
        font-size: 10px
    }

    .service-nav {
        gap: 19px;
        font-size: 9px
    }

    .service-section {
        grid-template-columns: 1fr
    }

    .weather-layout {
        grid-template-columns: 1fr 1.3fr;
        gap: 35px
    }

    .weather-map>img {
        height: 260px
    }

    .weather-panel .section-heading {
        flex-wrap: nowrap
    }

    .weather-panel h2 {
        font-size: 27px
    }

    .weather-temp {
        gap: 16px
    }

    .weather-temp>strong {
        font-size: 49px
    }

    .weather-temp>svg {
        width: 37px
    }

    .edition-feature {
        min-height: 290px
    }

    .paper-cover-link {
        right: 35px;
        width: 210px;
        bottom: -110px
    }

    .edition-feature p {
        max-width: 260px
    }

    .edition-feature h2 {
        font-size: 33px;
        max-width: 280px
    }

    .zodiac-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    body[data-design=b] .hero-lead>h2 {
        font-size: 35px
    }

    body[data-design=b] .hero-lead {
        gap: 0 24px
    }

    body[data-design=b] .hero-lead>.dek {
        font-size: 13px
    }

    body[data-design=b] .hero-middle {
        gap: 15px
    }

    body[data-design=b] .hero-middle .sub-story {
        padding-left: 15px
    }

    body[data-design=b] .hero-briefs {
        padding-left: 18px;
        gap: 0 14px
    }

    body[data-design=b] .hero-briefs .brief-item h3 {
        font-size: 17px
    }

    body[data-design=b] .service-section {
        padding: 18px
    }
}

@media(max-width:600px) {
    .prototype-bar .container>span:last-child {
        max-width: 178px
    }

    .design-review>.container {
        display: block
    }

    .design-review>.container>span {
        display: none
    }

    .design-review [role=group] {
        justify-content: center;
        gap: 5px
    }

    .design-review button {
        padding: 6px 9px;
        font-size: 10px;
        min-height: 36px
    }

    .design-review {
        padding: 7px 0
    }

    .service-nav {
        min-height: 42px;
        gap: 20px
    }

    .nav-links a {
        font-size: 12px
    }

    .hero-lead .source-photo {
        aspect-ratio: 1.75 !important
    }

    .hero-middle .source-photo {
        aspect-ratio: 1.45 !important
    }

    .hero-middle .source-photo img {
        width: 255% !important;
        left: -70% !important;
        top: -48% !important
    }

    .service-section {
        margin: 35px 0;
        gap: 22px
    }

    .weather-panel {
        padding: 21px 18px
    }

    .weather-panel .section-heading {
        align-items: start;
        gap: 8px
    }

    .weather-panel h2 {
        font-size: 25px;
        max-width: 230px
    }

    .demo-pill {
        font-size: 7px;
        padding: 4px 5px
    }

    .weather-layout {
        grid-template-columns: 1fr 1.15fr;
        gap: 15px
    }

    .weather-map>img {
        height: 220px
    }

    .weather-temp {
        gap: 7px
    }

    .weather-temp>strong {
        font-size: 39px
    }

    .weather-temp>svg {
        width: 28px
    }

    .weather-temp>span {
        font-size: 8px
    }

    .weather-info select {
        font-size: 10px;
        padding: 8px 5px
    }

    .weather-disclaimer {
        font-size: 8px
    }

    .weather-rain {
        font-size: 9px
    }

    .weather-rain span {
        display: block;
        margin-top: 4px
    }

    .weather-days button {
        padding: 9px 11px;
        min-height: 39px
    }

    .edition-feature {
        min-height: 345px;
        padding: 27px 24px
    }

    .edition-feature h2 {
        font-size: 31px;
        max-width: 240px
    }

    .edition-feature p {
        font-size: 12px;
        max-width: 210px
    }

    .paper-cover-link {
        right: -35px;
        width: 175px;
        bottom: -73px
    }

    .edition-feature .button {
        margin-top: 20px
    }

    .original-edition {
        padding: 5px;
        margin-inline: -10px
    }

    .edition-thumbs {
        gap: 8px
    }

    .edition-thumbs>a {
        width: calc(25% - 6px);
        font-size: 9px
    }

    .edition-thumbs img {
        height: 82px
    }

    .zodiac-grid {
        grid-template-columns: 1fr;
        gap: 17px
    }

    .zodiac-grid article {
        padding: 18px 20px
    }

    .zodiac-grid h2 {
        font-size: 28px
    }

    .route-empty h1 {
        font-size: 29px
    }

    .article-figure>.source-photo:not(.infographic-photo) {
        aspect-ratio: 1.7 !important
    }

    .article-figure>.source-photo:not(.infographic-photo) img {
        width: 180% !important;
        left: -22% !important
    }

    .article-figure>.source-photo:first-child {
        min-height: 160px
    }

    body[data-design=b] .welcome h1 {
        font-size: 30px
    }

    body[data-design=b] .hero-grid {
        display: block
    }

    body[data-design=b] .hero-lead {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-bottom: 24px
    }

    body[data-design=b] .hero-lead>.article-labels {
        order: 0;
        margin: 0 0 14px
    }

    body[data-design=b] .hero-lead>h2 {
        order: 1;
        font-size: 37px;
        margin-bottom: 15px;
        line-height: 1.06
    }

    body[data-design=b] .hero-lead>.dek {
        order: 2;
        font-size: 14px;
        margin: 0 0 20px
    }

    body[data-design=b] .hero-lead>.image-link {
        order: 3
    }

    body[data-design=b] .hero-lead .source-photo {
        aspect-ratio: 1.5 !important
    }

    body[data-design=b] .hero-lead>.image-caption {
        order: 4;
        font-size: 8px;
        margin-top: 7px
    }

    body[data-design=b] .hero-lead>.meta {
        order: 5;
        margin-top: 14px
    }

    body[data-design=b] .hero-middle {
        display: grid;
        margin: 24px 0;
        padding: 0;
        border: 0;
        gap: 18px
    }

    body[data-design=b] .hero-middle h2 {
        font-size: 22px
    }

    body[data-design=b] .hero-briefs {
        border: 0;
        border-top: 2px solid var(--navy);
        padding: 16px 0 0;
        display: block
    }

    body[data-design=b] .hero-briefs .brief-item h3 {
        font-size: 20px
    }

    body[data-design=b] .hero-briefs .brief-item {
        grid-template-columns: 30px 1fr;
        padding: 14px 0
    }

    body[data-design=b] .hero-briefs .brief-item:nth-of-type(4) {
        display: grid
    }

    body[data-design=b] .section-heading h2 {
        font-size: 28px
    }

    body[data-design=b] .service-section {
        padding: 0;
        background: #fff
    }

    body[data-design=b] .weather-panel {
        border: 1px solid var(--line)
    }

    body[data-design=b] .hero-lead .source-photo img {
        top: -43% !important
    }
}

@media print {

    .design-review,
    .service-nav,
    .edition-thumbs {
        display: none !important
    }

    .original-edition {
        padding: 0;
        border: 0;
        max-width: 100%;
        max-height: none !important;
        overflow: visible
    }

    .original-edition img,
    .original-edition.zoomed img {
        height: auto;
        width: auto;
        max-width: 100%;
        max-height: 260mm;
        margin: 0 auto
    }

    .article-figure .source-photo {
        max-height: 240px
    }

    .article-figure .infographic-photo {
        max-height: none
    }

    .article-page .article-layout {
        max-width: none
    }
}

/* Photographs extracted from the supplied edition, with original pages preserved. */
@font-face {
    font-family: Editorial;
    src: url('../fonts/serif-regular.ttf') format('truetype');
    font-display: swap;
    font-weight: 400 500
}

.image-link>.extracted-photo {
    width: 100%;
    object-fit: cover
}

.hero-lead .image-link>.extracted-photo {
    aspect-ratio: 1.8;
    object-position: center
}

.hero-middle .image-link>.extracted-photo {
    aspect-ratio: 1.5;
    object-position: 43% center
}

.story-card .image-link>.extracted-photo {
    aspect-ratio: 1.85;
    object-position: center
}

.story-card .image-link>.infographic-photo {
    object-position: center 30%
}

.article-figure>.extracted-photo {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    object-position: center
}

.article-figure>.infographic-photo {
    width: min(100%, 760px);
    max-height: none;
    object-fit: contain;
    margin: auto
}

.weather-map>img {
    height: auto;
    aspect-ratio: 300/320
}

.service-nav>a {
    padding: 10px 0
}

.hero-middle .image-link img {
    min-height: 0
}

body[data-design=b] .hero-lead .image-link>.extracted-photo {
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center
}

.paper-cover-link img {
    transition: transform .2s
}

.paper-cover-link:hover img {
    transform: translateY(-5px)
}

@media(max-width:600px) {
    .hero-lead .image-link>.extracted-photo {
        aspect-ratio: 1.75
    }

    .article-figure>.extracted-photo {
        max-height: 350px;
        aspect-ratio: 1.7
    }

    .article-figure>.infographic-photo {
        aspect-ratio: auto;
        max-height: none
    }

    body[data-design=b] .hero-lead .image-link>.extracted-photo {
        aspect-ratio: 1.5;
        height: auto
    }

    .weather-map>img {
        height: auto
    }
}

/* Propuesta A: módulos de lectura y secciones editoriales. */
:root {
    --cream: #fbf5e9;
    --cream-border: #eadcc5;
    --sky-day: #ecf7ff;
    --sky-evening: #f4d6b9
}

body {
    font-size: 16px
}

.nav-links {
    gap: 23px
}

.nav-links a {
    font-size: 12px
}

.hero-briefs {
    min-width: 0
}

.hero-briefs .sobremesa-block {
    height: 100%
}

.sobremesa-block {
    background: var(--cream);
    border: 1px solid var(--cream-border);
    padding: 22px 22px 18px;
    min-width: 0
}

.coffee-heading {
    display: flex;
    align-items: center;
    gap: 10px
}

.coffee-heading>svg {
    width: 31px;
    height: 31px;
    color: #9c6138
}

.coffee-heading h2 {
    font-size: 25px;
    color: var(--navy);
    margin-top: 5px
}

.coffee-heading .eyebrow {
    color: #97512d;
    font-size: 11px
}

.coffee-intro {
    font-size: 14px;
    color: #79563c;
    margin: 10px 0 6px
}

.coffee-item {
    padding: 17px 0;
    border-top: 1px solid var(--cream-border)
}

.coffee-icon svg {
    width: 18px;
    height: 18px;
    color: #a76b42
}

.coffee-quote {
    font-family: var(--serif);
    font-style: italic;
    font-size: 20px;
    line-height: 1.28;
    color: #312927;
    margin: 6px 0
}

.coffee-item .sample-label {
    font-size: 12px;
    color: #795f4d
}

.sobremesa-block .all-stories {
    font-size: 14px
}

.radiografia-block {
    margin: 55px 0
}

.radiografia-block .section-heading h2 {
    font-size: 36px
}

.radiografia-block .section-heading p {
    font-size: 15px;
    max-width: 580px
}

.radiografia-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: 32px;
    align-items: center;
    background: #f5f8fc;
    border-top: 3px solid var(--navy);
    padding: 26px
}

.radiografia-feature img {
    width: 100%;
    max-height: 560px;
    object-fit: contain;
    background: #e6eff9
}

.radiografia-feature h3 {
    font-size: 32px;
    margin: 14px 0
}

.radiografia-feature p {
    font-size: 16px;
    color: var(--muted);
    line-height: 1.6
}

.radiografia-feature .sample-label {
    font-size: 13px
}

.gallery-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 29px 0 12px
}

.gallery-heading h3 {
    font-size: 25px
}

.gallery-heading span {
    font-size: 13px;
    color: var(--muted)
}

.radiografia-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 2px 2px 18px;
    scrollbar-color: var(--navy) #e6eaf0
}

.radiografia-template {
    flex: 0 0 min(42%, 360px);
    scroll-snap-align: start;
    padding: 15px;
    border: 1px solid var(--line)
}

.template-art {
    height: 170px;
    background: #eaf0f9;
    display: flex;
    align-items: end;
    gap: 12px;
    padding: 22px
}

.template-art span {
    width: 18%;
    height: 30%;
    background: #aac0dd
}

.template-art span:nth-child(2) {
    height: 65%;
    background: #ff8868
}

.template-art span:nth-child(3) {
    height: 48%
}

.template-art span:nth-child(4) {
    height: 85%;
    background: var(--navy)
}

.radiografia-template h3 {
    font-size: 22px;
    margin: 10px 0
}

.radiografia-template p {
    font-size: 14px;
    color: var(--muted)
}

.radiografia-template .sample-label {
    font-size: 12px
}

.special-page {
    min-height: 60vh
}

.special-page .sobremesa-block {
    max-width: 780px;
    margin: 0 auto 45px;
    padding: 35px
}

.special-page .coffee-quote {
    font-size: 29px
}

.special-page .coffee-item {
    padding: 25px 0
}

.special-page .radiografia-block {
    margin: 10px 0 45px
}

.kdrama {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 24px;
    background: #f1f4f9;
    padding: 25px;
    margin: 35px 0;
    border-left: 4px solid var(--orange);
    align-items: center
}

.kdrama h2 {
    font-size: 30px;
    margin: 12px 0
}

.kdrama p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 12px
}

.poster-placeholder {
    min-height: 250px;
    background: linear-gradient(155deg, #142d5a, #526990 60%, #ff4b1c);
    color: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.poster-placeholder span {
    font-size: 12px;
    letter-spacing: 3px
}

.poster-placeholder strong {
    font-family: var(--serif);
    font-size: 28px;
    line-height: 1
}

.poster-placeholder small {
    font-size: 12px
}

.ad-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #f3f5f8;
    color: #637084;
    border: 1px dashed #aeb9c9;
    margin: 32px auto;
    letter-spacing: 1.3px;
    text-align: center;
    gap: 5px
}

.ad-slot span {
    font-size: 12px
}

.ad-slot small {
    font-size: 12px;
    letter-spacing: 0
}

.ad-leaderboard {
    max-width: 728px;
    min-height: 90px
}

.ad-rectangle {
    width: min(100%, 300px);
    min-height: 250px
}

.weather-home {
    min-width: 0
}

.weather-home>.all-stories {
    font-size: 14px
}

.weather-map {
    border-radius: 12px;
    overflow: hidden;
    background: var(--sky-day);
    padding: 12px;
    transition: background .5s
}

.weather-map.climate-evening {
    background: var(--sky-evening)
}

.sky-animation {
    position: absolute;
    right: 12px;
    top: 12px;
    display: flex;
    gap: 10px;
    color: #d48a3e
}

.sky-animation svg:first-child {
    width: 34px;
    height: 34px;
    animation: climate-turn 12s linear infinite
}

.sky-animation svg:last-child {
    width: 30px;
    height: 30px;
    animation: climate-drift 5s ease-in-out infinite alternate
}

.municipio-points {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    margin-top: 6px
}

.climate-chip {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    position: static !important;
    transform: none !important;
    border: 1px solid #fff !important;
    border-radius: 3px !important;
    width: auto !important;
    height: auto !important;
    min-height: 32px !important;
    box-shadow: none !important;
    padding: 4px 6px;
    background: #f4b985 !important;
    color: #17223d;
    font-size: 10px;
    line-height: 1.1
}

.climate-chip.mild {
    background: #dbe4b4 !important
}

.climate-chip.cool {
    background: #acd1e6 !important
}

.climate-chip.warm {
    background: #f7ae81 !important
}

.climate-chip svg {
    width: 13px;
    height: 13px
}

.climate-chip:hover,
.climate-chip:focus-visible {
    outline: 2px solid var(--navy)
}

.weather-map>.climate-chip:before {
    display: none
}

.weather-info label,
.weather-info select,
.weather-days button,
.weather-rain,
.weather-temp>span {
    font-size: 14px
}

.weather-disclaimer {
    font-size: 12px
}

.climate-page .weather-panel {
    margin: 25px 0
}

.climate-page .weather-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(240px, .6fr)
}

.climate-page .weather-map>img {
    height: 430px;
    max-width: 370px;
    margin: auto
}

.climate-page .weather-map {
    padding: 22px
}

.zodiac-range {
    font-size: 19px !important;
    color: var(--navy) !important;
    font-weight: 700;
    margin: 12px 0 !important
}

.zodiac-grid article p {
    font-size: 16px
}

.zodiac-grid small {
    font-size: 12px
}

@keyframes climate-turn {
    to {
        transform: rotate(360deg)
    }
}

@keyframes climate-drift {
    to {
        transform: translateX(8px)
    }
}

@media(max-width:1100px) {
    .nav-links {
        gap: 11px
    }

    .nav-links a {
        font-size: 11px
    }

    .hero-briefs .sobremesa-block {
        display: block
    }

    .coffee-heading h2 {
        font-size: 21px
    }
}

@media(max-width:780px) {
    .nav-links a {
        font-size: 11px
    }

    .radiografia-feature {
        gap: 16px
    }

    .radiografia-feature h3 {
        font-size: 26px
    }

    .climate-page .weather-layout {
        grid-template-columns: 1fr
    }

    .climate-page .weather-map>img {
        height: 300px
    }
}

@media(max-width:600px) {
    .sobremesa-block {
        padding: 20px
    }

    .hero-briefs .sobremesa-block {
        margin-top: 8px
    }

    .coffee-quote {
        font-size: 22px
    }

    .radiografia-block {
        margin: 35px 0
    }

    .radiografia-feature {
        grid-template-columns: 1fr;
        padding: 14px
    }

    .radiografia-feature img {
        max-height: 380px
    }

    .radiografia-feature h3 {
        font-size: 25px
    }

    .radiografia-block .section-heading h2 {
        font-size: 29px
    }

    .radiografia-carousel .radiografia-template {
        flex-basis: 78%
    }

    .gallery-heading h3 {
        font-size: 21px
    }

    .special-page .sobremesa-block {
        padding: 22px
    }

    .special-page .coffee-quote {
        font-size: 24px
    }

    .kdrama {
        grid-template-columns: 105px 1fr;
        gap: 13px;
        padding: 14px
    }

    .poster-placeholder {
        min-height: 185px;
        padding: 10px
    }

    .poster-placeholder strong {
        font-size: 18px
    }

    .kdrama h2 {
        font-size: 24px
    }

    .kdrama p {
        font-size: 14px
    }

    .ad-leaderboard {
        width: 320px;
        min-height: 100px;
        max-width: 100%
    }

    .weather-layout {
        grid-template-columns: 1fr
    }

    .weather-map>img {
        height: 220px
    }

    .climate-page .weather-map>img {
        height: 260px
    }

    .climate-page .weather-panel {
        padding: 15px
    }
}

@media(prefers-reduced-motion:reduce) {
    .sky-animation svg {
        animation: none !important
    }
}

@media print {

    .ad-slot,
    .sobremesa-block,
    .radiografia-carousel {
        display: none !important
    }
}

.astro-promo {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    background: #142d5a;
    color: #fff;
    padding: 29px 32px;
    margin: 35px 0
}

.astro-promo .eyebrow {
    color: #fff
}

.astro-promo h2 {
    font-size: 29px;
    margin: 10px 0
}

.astro-promo p {
    font-size: 16px;
    color: #e1e7f0
}

.astro-promo strong {
    display: block;
    margin-top: 11px;
    font-size: 15px
}

.astro-promo .button {
    background: #fff;
    color: var(--navy);
    white-space: nowrap
}

@media(max-width:600px) {
    .astro-promo {
        display: block;
        padding: 24px
    }

    .astro-promo .button {
        margin-top: 20px;
        white-space: normal
    }
}

.climate-chip svg {
    animation: climate-drift 3s ease-in-out infinite alternate
}

.climate-chip:nth-child(2n) svg {
    animation-delay: 1s
}

.climate-chip:nth-child(3n) svg {
    animation-delay: 1.8s
}

@media(prefers-reduced-motion:reduce) {
    .climate-chip svg {
        animation: none
    }
}

/* Sobremesa supplied image and reserved square advertising rail. */
.sobremesa-image {
    margin: 13px 0 5px
}

.sobremesa-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 2/1;
    object-fit: cover;
    border: 1px solid var(--cream-border)
}

.sobremesa-image figcaption {
    font-size: 11px;
    line-height: 1.45;
    color: #795f4d;
    margin-top: 7px
}

.sobremesa-rail .sobremesa-image img {
    aspect-ratio: 1.65;
    object-position: center
}

.sobremesa-rail .sobremesa-image figcaption {
    font-size: 10px
}

.special-page.sobremesa .sobremesa-image {
    margin: 25px 0
}

.special-page.sobremesa .sobremesa-image img {
    aspect-ratio: 2/1
}

.home-content-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 27px;
    align-items: start
}

.home-content-layout>.cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px
}

.home-ad-rail {
    display: grid;
    gap: 20px
}

.home-ad-rail .ad-slot {
    margin: 0
}

.ad-square {
    width: 300px;
    height: 300px;
    max-width: 100%
}

.ad-slot {
    letter-spacing: normal;
    background: #f6f8fb;
    border: 1px solid #c7d1df;
    border-top: 3px solid var(--navy);
    padding: 18px;
    gap: 9px
}

.ad-slot span {
    font-size: 11px;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: #53647e
}

.ad-slot strong {
    font: 600 25px var(--serif);
    color: var(--navy)
}

.ad-slot small {
    font-size: 12px;
    color: #69758a
}

.special-page>.ad-slot {
    margin: 36px auto
}

@media(max-width:990px) {
    .home-content-layout {
        grid-template-columns: 1fr
    }

    .home-ad-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px
    }

    .home-ad-rail .ad-square {
        width: 100%;
        height: auto;
        aspect-ratio: 1
    }
}

@media(max-width:600px) {
    .home-content-layout>.cards {
        grid-template-columns: 1fr
    }

    .home-ad-rail {
        grid-template-columns: 1fr 1fr;
        gap: 10px
    }

    .home-ad-rail .ad-square {
        min-width: 0;
        padding: 8px
    }

    .home-ad-rail .ad-slot strong {
        font-size: 17px
    }

    .home-ad-rail .ad-slot span {
        font-size: 9px
    }

    .home-ad-rail .ad-slot small {
        font-size: 10px
    }

    .sobremesa-rail .sobremesa-image img {
        aspect-ratio: 2/1
    }
}