html {
background: #ffffff;
color: #121212;
scroll-behavior: smooth;
overflow-x: hidden;
}
body.front-body {
margin: 0;
background:
linear-gradient(180deg, #f5ede1 0, #fbf8f2 120px, #ffffff 260px),
#ffffff;
color: #121212;
font-family: "Cormorant Garamond", Georgia, serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
overflow-anchor: none;
}
:root {
--front-ink: #121212;
--front-muted: #6b6256;
--front-line: #ddd4c6;
--front-accent: #8f5c2c;
--front-accent-soft: #efe2cf;
--front-alert: #8f2f23;
--front-alert-soft: #f8e8e3;
--front-shell-padding: 30px;
--front-space-1: 8px;
--front-space-2: 12px;
--front-space-3: 16px;
--front-space-4: 24px;
--front-space-5: 32px;
--front-space-6: 40px;
--front-rule-strong: 2px solid #111111;
--front-rule-soft: 1px solid var(--front-line);
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
display: block;
height: auto;
}
/* Evita CLS: reserva espacio antes de que cargue la imagen */
img[width][height] {
aspect-ratio: attr(width) / attr(height);
}
.front-rhythm-band,
.front-signature-band,
.front-city-grid,
.front-latest-grid,
.section-story-grid,
.front-footer {
content-visibility: auto;
contain-intrinsic-size: 1px 760px;
}
.front-shell {
max-width: 1380px;
margin: 0 auto;
padding: 0 var(--front-shell-padding) 60px;
}
.front-header {
width: 100vw;
margin-left: calc(50% - 50vw);
padding: 0;
box-sizing: border-box;
}
.front-topbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
border-bottom: 1px solid rgba(18, 18, 18, 0.12);
padding: 14px var(--front-shell-padding) 11px;
font-family: "Manrope", Arial, sans-serif;
font-size: 12px;
color: var(--front-muted);
box-sizing: border-box;
}
.front-topbar__actions {
display: inline-flex;
align-items: center;
gap: 14px;
}
.front-topbar__settings {
appearance: none;
border: 1px solid #d8cdbd;
background: #fbf6ef;
color: #4d3c2b;
padding: 8px 12px;
border-radius: 999px;
font: inherit;
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.front-topbar__settings span {
font-size: 11px;
letter-spacing: 0.03em;
color: #7a6239;
}
.front-topbar__admin {
font-weight: 600;
letter-spacing: 0.04em;
white-space: nowrap;
}
.has-front-modal {
overflow: hidden;
}
.front-identity-bar {
display: grid;
grid-template-columns: auto 1fr;
gap: 16px;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid rgba(18, 18, 18, 0.08);
font-family: "Manrope", Arial, sans-serif;
}
.front-identity-bar__label {
margin: 0;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--front-alert);
}
.front-identity-bar__items {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.front-identity-bar__items span {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 11px;
border: 1px solid #ddcfbe;
background: rgba(255, 255, 255, 0.74);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #4f4537;
}
.front-masthead {
border-bottom: 2px solid #111111;
padding: 22px 0 16px;
text-align: center;
}
.front-masthead__brand {
display: inline-block;
font-family: "Fraunces", Georgia, serif;
font-size: clamp(38px, 6vw, 62px);
line-height: 1;
letter-spacing: -0.03em;
font-weight: 700;
}
.front-masthead__edition {
margin: 8px 0 0;
font-family: "Manrope", Arial, sans-serif;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--front-muted);
}
.front-masthead__tagline {
margin: 10px auto 0;
max-width: 680px;
font-family: "Manrope", Arial, sans-serif;
font-size: 12px;
line-height: 1.55;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #5b5247;
}
.front-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 18px;
border-bottom: 1px solid #d6d6d6;
padding: 10px 0;
font-family: "Manrope", Arial, sans-serif;
font-size: 12px;
text-transform: uppercase;
scrollbar-width: none;
}
.front-nav::-webkit-scrollbar {
display: none;
}
.front-nav__link {
color: #444444;
white-space: nowrap;
}
.front-nav__link.is-active,
.front-nav__link:hover {
color: #000000;
font-weight: 700;
}
.front-location-modal[hidden] {
display: none;
}
.front-location-modal {
position: fixed;
inset: 0;
z-index: 80;
}
.front-location-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(12, 10, 8, 0.48);
}
.front-location-modal__panel {
position: relative;
width: min(520px, calc(100vw - 32px));
margin: 72px auto 0;
background: #fffdf9;
border: 1px solid #d8cdbd;
box-shadow: 0 28px 70px rgba(17, 17, 17, 0.18);
padding: 24px;
}
.front-location-modal__header {
display: flex;
justify-content: space-between;
align-items: start;
gap: 16px;
}
.front-location-modal__title {
margin: 6px 0 0;
font-family: "Fraunces", Georgia, serif;
font-size: clamp(24px, 3vw, 30px);
line-height: 1.05;
}
.front-location-modal__dismiss {
appearance: none;
border: none;
background: transparent;
color: #6b6257;
font-size: 32px;
line-height: 1;
cursor: pointer;
padding: 0;
}
.front-location-modal__summary {
margin: 10px 0 0;
font-size: 14px;
line-height: 1.5;
color: #5b534a;
}
.front-location-form {
display: grid;
gap: 14px;
margin-top: 18px;
}
.front-location-form__field {
display: grid;
gap: 6px;
font-family: "Manrope", Arial, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #6c5b44;
}
.front-location-form__field select {
width: 100%;
border: 1px solid #d5cab8;
background: #ffffff;
padding: 12px 14px;
font: 400 15px/1.3 "Manrope", Arial, sans-serif;
color: #1b1a18;
}
.front-location-form__actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
margin-top: 4px;
}
.front-location-form__reset {
font-family: "Manrope", Arial, sans-serif;
font-size: 13px;
color: #8f2f23;
}
.front-location-form__submit {
appearance: none;
border: 1px solid #111111;
background: #111111;
color: #ffffff;
padding: 12px 18px;
font: 700 13px/1 "Manrope", Arial, sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
}
.front-main {
padding-top: 22px;
}
.front-empty-state {
margin: 10px 0 28px;
padding: 28px 24px;
border: 1px solid #ddd5ca;
background: linear-gradient(180deg, #fcf7f0 0%, #ffffff 100%);
}
.front-empty-state .section-heading {
margin: 10px 0 12px;
}
.front-empty-state .section-description {
max-width: 720px;
}
.front-grid {
display: grid;
gap: 24px;
}
.front-kicker,
.section-hero__kicker,
.article-kicker {
margin: 0 0 8px;
font-family: "Manrope", Arial, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--front-alert);
}
.front-column-title {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
}
.front-column-title::before {
content: "";
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--front-accent);
box-shadow: 0 0 0 4px rgba(143, 92, 44, 0.12);
}
.front-headline-xl,
.front-headline-lg,
.front-headline-md,
.section-hero__title,
.article-title {
margin: 0;
font-family: "Fraunces", Georgia, serif;
font-weight: 700;
line-height: 1.03;
text-wrap: balance;
}
.front-headline-xl {
font-size: clamp(28px, 3.7vw, 46px);
max-width: 7.4ch;
line-height: 0.94;
}
.front-headline-lg,
.section-hero__title {
font-size: clamp(28px, 3vw, 38px);
}
.front-headline-md {
font-size: clamp(22px, 2vw, 28px);
}
.front-summary,
.section-hero__summary,
.article-deck {
margin: 12px 0 0;
font-size: 18px;
line-height: 1.55;
color: #333333;
text-wrap: pretty;
}
.front-meta,
.article-meta {
margin-top: 12px;
font-family: "Manrope", Arial, sans-serif;
font-size: 12px;
color: #6b6b6b;
}
.front-lead__media img,
.front-hero-card__media img,
.front-second-lead__media img,
.front-signature-card__media img,
.front-signature-note__media img,
.front-latest-card__media img,
.article-hero__media img,
.front-section-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
background: #f3f3f3;
border: 1px solid rgba(17, 17, 17, 0.08);
}
.front-newsbar {
display: grid;
grid-template-columns: 92px 1fr;
gap: 18px;
align-items: stretch;
margin-bottom: 22px;
border-top: var(--front-rule-strong);
border-bottom: var(--front-rule-soft);
padding: 10px 0;
}
.front-newsbar__label,
.front-column-title,
.front-block-heading__note,
.section-list-title,
.article-sidebar-title {
font-family: "Manrope", Arial, sans-serif;
}
.front-newsbar__label,
.front-column-title,
.section-list-title,
.article-sidebar-title {
margin: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #845b2f;
}
.front-newsbar__items {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
}
.front-newsbar__item {
display: grid;
gap: 6px;
border-left: 1px solid #ddd6ca;
padding: 2px 16px;
align-content: start;
min-height: 56px;
}
.front-newsbar__item:first-child {
border-left: none;
padding-left: 0;
}
.front-newsbar__kicker {
font-family: "Manrope", Arial, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #6b6359;
}
.front-newsbar__item span:last-child {
font-size: 14px;
line-height: 1.28;
}
.front-news-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
margin-top: 22px;
border-top: var(--front-rule-strong);
border-bottom: var(--front-rule-soft);
padding: 20px 0;
}
.front-news-strip__item {
display: grid;
align-content: start;
gap: 10px;
padding: 0 20px;
border-left: var(--front-rule-soft);
min-width: 0;
}
.front-news-strip__item:first-child {
padding-left: 0;
border-left: none;
}
.front-news-strip__item:last-child {
padding-right: 0;
}
.front-news-strip__media {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #f3f1ec;
border: 1px solid rgba(17, 17, 17, 0.08);
}
.front-news-strip__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.front-news-strip__copy {
display: grid;
align-content: start;
gap: 7px;
}
.front-news-strip__item .front-headline-md {
font-size: clamp(16px, 1.2vw, 21px);
line-height: 1.08;
}
.front-hero-stage {
display: grid;
grid-template-columns: minmax(210px, 0.72fr) minmax(0, 1.46fr) minmax(220px, 0.76fr);
gap: 18px;
align-items: start;
border-bottom: var(--front-rule-soft);
padding-bottom: 24px;
}
.front-hero-side {
display: grid;
gap: 22px;
}
.front-lead {
position: relative;
border-top: 4px solid #111111;
padding: 0;
display: grid;
gap: 14px;
align-items: start;
}
.front-lead::before {
content: none;
}
.front-lead__copy {
display: grid;
align-content: start;
gap: 10px;
max-width: none;
}
.front-lead__media img {
box-shadow: 0 14px 34px rgba(17, 17, 17, 0.1);
}
.front-lead__media {
border: 1px solid rgba(17, 17, 17, 0.08);
box-shadow: 0 16px 34px rgba(17, 17, 17, 0.08);
aspect-ratio: 16 / 9.7;
background: #f6f1ea;
}
.front-hero-card {
display: grid;
align-content: start;
gap: 10px;
min-width: 0;
border: none;
background: transparent;
padding: 0;
box-shadow: none;
}
.front-hero-card__copy {
display: grid;
align-content: start;
gap: 7px;
}
.front-hero-card .front-headline-md {
font-size: clamp(17px, 1.25vw, 21px);
line-height: 1.1;
}
.front-hero-card .front-summary {
margin-top: 0;
font-size: 14px;
line-height: 1.45;
color: #4b443c;
-webkit-line-clamp: 2;
}
.front-hero-card .front-meta {
margin-top: 0;
}
.front-hero-side .front-hero-card + .front-hero-card {
padding-top: 18px;
border-top: var(--front-rule-soft);
}
.front-rhythm-band {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.85fr);
gap: var(--front-space-5);
margin-top: 26px;
align-items: start;
}
.front-second-lead {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
gap: 24px;
padding-top: 24px;
border-top: var(--front-rule-strong);
}
.front-second-lead__copy {
display: grid;
align-content: start;
}
.front-second-lead__support {
grid-column: 1 / -1;
display: grid;
align-content: start;
gap: 8px;
padding-top: 16px;
border-top: 1px solid #ddd6ca;
}
.front-compact-stack {
padding: 18px 18px 20px;
background: linear-gradient(180deg, #fcf8f1 0%, #ffffff 100%);
border: 1px solid #ddd5ca;
display: grid;
align-content: start;
gap: 12px;
}
.front-block-heading {
display: grid;
gap: 6px;
margin-bottom: 16px;
}
.front-block-heading__note {
margin: 0;
font-size: 13px;
color: #6b6b6b;
}
.front-compact-note {
padding-top: 12px;
border-top: 1px solid #ddd6ca;
}
.front-compact-note:first-of-type {
padding-top: 0;
border-top: none;
}
.front-signature-band {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.9fr);
gap: 30px;
margin-top: 28px;
align-items: stretch;
}
.front-block-heading--signature .front-column-title::before {
background: var(--front-alert);
box-shadow: 0 0 0 4px rgba(143, 47, 35, 0.1);
}
.front-signature-card {
display: grid;
align-content: start;
padding: 20px;
border: 1px solid #d9ccbc;
background: linear-gradient(180deg, #fcf7f0 0%, #ffffff 100%);
gap: 10px;
min-height: 100%;
}
.front-signature-card__media img {
margin-bottom: 14px;
}
.front-signature-stack {
display: grid;
gap: 12px;
padding: 18px;
border: 1px solid #ddd5ca;
background: #ffffff;
align-content: start;
min-height: 100%;
}
.front-signature-note {
display: grid;
grid-template-columns: 150px minmax(0, 1fr);
gap: 14px;
align-items: start;
padding: 12px 0;
border-top: 1px solid var(--front-line);
}
.front-signature-note:first-of-type {
padding-top: 0;
border-top: none;
}
.front-signature-note__media img {
width: 100%;
}
.front-signature-note__copy {
display: grid;
align-content: start;
gap: 8px;
}
.front-city-desk {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
gap: 28px;
margin-top: 28px;
align-items: stretch;
}
.front-city-desk__primary,
.front-city-desk__rail {
min-height: 100%;
}
.front-city-desk__primary {
padding-top: 10px;
}
.front-block-heading--city .front-column-title::before {
background: #7a6239;
}
.front-block-heading--urgent .front-column-title,
.front-block-heading--urgent .front-block-heading__note {
color: var(--front-alert);
}
.front-block-heading--urgent .front-column-title::before {
background: var(--front-alert);
box-shadow: 0 0 0 4px rgba(143, 47, 35, 0.1);
}
.front-city-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
align-items: stretch;
padding-top: 8px;
}
.front-city-card {
padding: 18px;
border-top: 2px solid #111111;
background: #fbf7f1;
display: grid;
align-content: start;
gap: 8px;
min-height: 100%;
overflow: hidden;
}
.front-city-card .front-headline-md a {
display: block;
overflow: visible;
-webkit-line-clamp: unset;
}
.front-city-card__media {
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #f3f1ec;
margin: -18px -18px 8px;
border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}
.front-city-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.front-city-desk__rail {
padding: 18px;
border: 1px solid #e3d1c9;
background: linear-gradient(180deg, var(--front-alert-soft) 0%, #fffdfb 100%);
display: grid;
align-content: start;
gap: 12px;
margin-top: 4px;
}
.front-urgent-note {
padding: 12px 0;
border-top: 1px solid rgba(143, 47, 35, 0.16);
display: grid;
align-content: start;
gap: 8px;
}
.front-urgent-note:first-of-type {
padding-top: 0;
border-top: none;
}
.front-latest-block {
margin-top: 30px;
padding-top: 20px;
border-top: var(--front-rule-soft);
}
.front-latest-block__header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
margin-bottom: 18px;
}
.front-latest-block__count {
margin: 0;
font-family: "Manrope", Arial, sans-serif;
font-size: 12px;
color: #6b6b6b;
}
.front-latest-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
align-items: stretch;
}
.front-latest-card {
display: grid;
align-content: start;
grid-template-rows: auto auto 1fr auto;
gap: 10px;
padding: 14px 0 12px;
border-top: 1px solid #ddd6ca;
border-bottom: 1px solid #ddd6ca;
min-height: 100%;
}
.front-lead .front-headline-xl a,
.front-second-lead .front-headline-lg a,
.front-signature-card .front-headline-lg a,
.front-hero-card .front-headline-md a,
.front-signature-note .front-headline-md a,
.front-city-card .front-headline-md a,
.front-urgent-note .front-headline-md a,
.front-latest-card .front-headline-md a,
.section-story .front-headline-md a,
.front-section-card .front-headline-md a,
.article-sidebar-card .front-headline-md a {
display: block;
overflow: visible;
}
.front-summary,
.section-hero__summary,
.article-deck,
.front-city-card .front-summary {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 4;
}
.front-lead .front-summary,
.front-second-lead .front-summary,
.front-signature-card .front-summary {
-webkit-line-clamp: 4;
}
.front-lead .front-headline-xl {
max-width: none;
}
.front-lead .front-summary {
font-size: 16px;
line-height: 1.52;
max-width: none;
}
.front-lead .front-meta {
max-width: none;
}
.front-lead .front-meta {
margin-top: 4px;
}
.front-city-card .front-summary,
.front-section-card .front-summary {
-webkit-line-clamp: 3;
}
.front-latest-card,
.front-section-card,
.front-signature-note__copy,
.article-sidebar-card,
.section-story {
gap: 8px;
}
.front-nav__link:focus-visible,
.front-topbar__admin:focus-visible,
.front-newsbar__item:focus-visible,
.front-masthead__brand:focus-visible,
.front-hero-card a:focus-visible,
.front-lead a:focus-visible,
.front-second-lead a:focus-visible,
.front-signature-card a:focus-visible,
.front-signature-note a:focus-visible,
.front-city-card a:focus-visible,
.front-urgent-note a:focus-visible,
.front-latest-card a:focus-visible,
.front-news-strip__item a:focus-visible {
outline: 2px solid rgba(143, 47, 35, 0.45);
outline-offset: 3px;
}
.front-latest-card__media img {
margin-bottom: 10px;
}
.front-latest-card__media {
align-self: start;
}
.front-section-split {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 16px;
}
.section-hero,
.section-list,
.article-layout,
.article-sidebar {
border-top: 1px solid #111111;
padding-top: 18px;
}
.section-heading {
margin: 0 0 10px;
font-family: "Fraunces", Georgia, serif;
font-size: clamp(34px, 4vw, 46px);
}
.section-description {
margin: 0 0 26px;
max-width: 760px;
font-size: 18px;
color: #3a3a3a;
}
.section-story-list {
display: grid;
gap: 18px;
}
.section-story,
.article-sidebar-card {
padding-top: 18px;
border-top: 1px solid #dfdfdf;
}
.section-story:first-child,
.article-sidebar-card:first-child {
padding-top: 0;
border-top: none;
}
.section-story-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin-top: 24px;
}
.front-section-card__media img {
margin-bottom: 12px;
}
.article-layout {
display: grid;
grid-template-columns: minmax(0, 1.55fr) 320px;
gap: 34px;
}
.article-title {
font-size: clamp(34px, 4vw, 52px);
}
.article-hero__media img {
margin: 22px 0 14px;
}
.front-lead__media,
.front-hero-card__media,
.front-second-lead__media,
.front-signature-card__media,
.front-signature-note__media,
.front-latest-card__media,
.front-section-card__media,
.article-hero__media {
display: block;
overflow: hidden;
background: #f3f1ec;
}
.front-second-lead__media {
aspect-ratio: 6 / 5;
}
.front-hero-card__media,
.front-signature-card__media,
.front-signature-note__media,
.front-latest-card__media,
.front-section-card__media {
aspect-ratio: 16 / 10;
}
.article-hero__media {
aspect-ratio: 16 / 9;
}
.article-taxonomy {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 18px 0 24px;
font-family: "Manrope", Arial, sans-serif;
font-size: 11px;
text-transform: uppercase;
color: #6d6d6d;
}
.article-taxonomy a,
.article-taxonomy span {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 10px;
border: 1px solid #ded5c8;
background: #fbf8f2;
font-weight: 800;
letter-spacing: 0.08em;
}
.article-taxonomy a:hover {
border-color: #8f5c2c;
color: #8f2f23;
}
.article-body {
font-size: 20px;
line-height: 1.85;
}
.article-body p {
margin: 0 0 24px;
}
.front-footer {
width: 100vw;
margin: 56px 0 0 calc(50% - 50vw);
padding: 36px var(--front-shell-padding) 28px;
box-sizing: border-box;
background:
linear-gradient(135deg, rgba(143, 47, 35, 0.18) 0%, rgba(143, 92, 44, 0) 38%),
linear-gradient(180deg, #17120f 0%, #0e0d0c 100%);
color: #fff8ef;
border-top: 4px solid #111111;
}
.front-footer__mast {
display: grid;
gap: 8px;
padding-bottom: 26px;
border-bottom: 1px solid rgba(255, 248, 239, 0.18);
}
.front-footer__eyebrow,
.front-footer__edition,
.front-footer__title,
.front-footer__bottom,
.front-footer__links,
.front-footer__chips,
.front-footer__actions {
font-family: "Manrope", Arial, sans-serif;
}
.front-footer__eyebrow,
.front-footer__edition,
.front-footer__title {
margin: 0;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.front-footer__eyebrow {
color: #e0b07e;
}
.front-footer__brand {
width: fit-content;
font-family: "Fraunces", Georgia, serif;
font-size: clamp(48px, 10vw, 124px);
line-height: 0.9;
font-weight: 700;
letter-spacing: -0.02em;
}
.front-footer__edition {
color: rgba(255, 248, 239, 0.68);
}
.front-footer__grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.7fr) minmax(260px, 0.8fr);
gap: 34px;
padding: 30px 0;
border-bottom: 1px solid rgba(255, 248, 239, 0.18);
}
.front-footer__brief h2 {
max-width: 620px;
margin: 0;
font-family: "Fraunces", Georgia, serif;
font-size: clamp(30px, 3.8vw, 54px);
line-height: 0.98;
font-weight: 700;
}
.front-footer__brief p {
max-width: 560px;
margin: 16px 0 0;
font-size: 20px;
line-height: 1.48;
color: rgba(255, 248, 239, 0.76);
}
.front-footer__title {
color: #e0b07e;
}
.front-footer__nav,
.front-footer__coverage {
display: grid;
align-content: start;
gap: 14px;
}
.front-footer__links,
.front-footer__chips,
.front-footer__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.front-footer__links {
flex-direction: column;
align-items: flex-start;
}
.front-footer__links a {
padding-bottom: 4px;
border-bottom: 1px solid rgba(255, 248, 239, 0.18);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 248, 239, 0.86);
}
.front-footer__links a:hover,
.front-footer__actions a:hover {
color: #ffffff;
border-color: #e0b07e;
}
.front-footer__chips span,
.front-footer__chips a {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 0 12px;
border: 1px solid rgba(255, 248, 239, 0.2);
background: rgba(255, 248, 239, 0.06);
font-family: "Manrope", Arial, sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 248, 239, 0.8);
}
.front-footer__chips a:hover {
border-color: #e0b07e;
color: #ffffff;
}
.front-footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-top: 18px;
font-size: 12px;
color: rgba(255, 248, 239, 0.6);
}
.front-footer__bottom p {
margin: 0;
}
.front-footer__actions a {
border-bottom: 1px solid rgba(255, 248, 239, 0.2);
color: rgba(255, 248, 239, 0.72);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
@media (max-width: 1440px) {
:root {
--front-shell-padding: 24px;
}
.front-shell {
max-width: 1300px;
padding-bottom: 52px;
}
.front-footer__grid {
grid-template-columns: minmax(0, 1fr) minmax(220px, 0.7fr);
}
.front-footer__coverage {
grid-column: 1 / -1;
}
.front-latest-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 1180px) {
:root {
--front-shell-padding: 20px;
}
.front-shell {
padding-bottom: 44px;
}
.front-topbar {
padding: 12px 0 10px;
}
.front-topbar__actions {
gap: 10px;
}
.front-masthead {
padding: 18px 0 14px;
}
.front-newsbar__items,
.front-news-strip,
.front-city-grid,
.front-latest-grid,
.section-story-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.front-news-strip__item {
padding: 0 16px;
}
.front-news-strip__item:nth-child(2n+1) {
padding-left: 0;
border-left: none;
}
.front-news-strip__item:nth-child(2n) {
padding-right: 0;
}
.front-second-lead {
grid-template-columns: 1fr;
}
.front-footer__grid {
grid-template-columns: 1fr;
gap: 26px;
}
.front-footer__coverage {
grid-column: auto;
}
}
@media (max-width: 1060px) {
.front-hero-stage {
grid-template-columns: 1fr;
}
.front-hero-side {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.front-rhythm-band {
grid-template-columns: 1fr;
gap: 24px;
}
.front-signature-band,
.front-city-desk {
grid-template-columns: 1fr;
}
}
/* ══════════════════════════════════════════════
MOBILE ≤860px — Tablets y phones anchos
══════════════════════════════════════════════ */
@media (max-width: 860px) {
/* Grids que colapsan a 1 columna */
.front-newsbar,
.front-newsbar__items,
.front-hero-stage,
.front-rhythm-band,
.front-signature-band,
.front-city-desk,
.article-layout,
.front-section-split {
grid-template-columns: 1fr;
}
/* Hero: lead primero, lados despues */
.front-lead { order: 1; }
.front-hero-side--left { order: 2; }
.front-hero-side--right { order: 3; }
/* Lados del hero: 2 columnas */
.front-hero-side {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
}
/* Hero cards: horizontal (thumb + texto) */
.front-hero-card {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 12px;
padding: 14px 0;
border-top: var(--front-rule-soft);
}
.front-hero-card:first-child {
border-top: none;
padding-top: 0;
}
.front-hero-card__media {
flex: 0 0 96px;
width: 96px;
aspect-ratio: 4 / 3;
border-radius: 4px;
overflow: hidden;
}
.front-hero-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.front-hero-card__copy {
flex: 1;
min-width: 0;
}
/* News strip: 2 columnas */
.front-news-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.front-news-strip__item {
padding: 0 16px;
}
.front-news-strip__item:nth-child(2n+1) {
padding-left: 0;
border-left: none;
}
.front-news-strip__item:nth-child(2n) {
padding-right: 0;
}
/* Latest y ciudad: 2 columnas */
.front-latest-grid,
.front-city-grid,
.section-story-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.front-second-lead {
grid-template-columns: 1fr;
}
.front-footer {
margin-top: 42px;
padding-top: 28px;
}
.front-footer__bottom {
align-items: flex-start;
flex-direction: column;
}
}
/* ══════════════════════════════════════════════
MOBILE ≤720px — Phones
══════════════════════════════════════════════ */
@media (max-width: 720px) {
:root {
--front-shell-padding: 14px;
}
.front-shell {
padding-bottom: 32px;
}
/* Topbar: ocultar fecha, solo acciones */
.front-topbar__date {
display: none;
}
.front-topbar {
justify-content: flex-end;
padding: 8px 0;
}
.front-topbar__actions {
gap: 8px;
}
/* Masthead */
.front-masthead {
padding: 12px 0 10px;
}
.front-masthead__brand {
font-size: clamp(36px, 13vw, 56px);
}
/* Nav: pill bar deslizable */
.front-nav {
display: flex;
flex-direction: row;
gap: 6px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
padding: 10px 0 12px;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.front-nav::-webkit-scrollbar {
display: none;
}
.front-nav__link {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
height: 30px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid #c8bfb5;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
color: #3a3228;
background: transparent;
text-decoration: none;
scroll-snap-align: start;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.front-nav__link.is-active,
.front-nav__link:hover {
background: #1a1410;
border-color: #1a1410;
color: #fff;
}
/* Hero sides: 1 columna en phone */
.front-hero-side {
grid-template-columns: 1fr;
}
/* Hero cards mas compactos */
.front-hero-card__media {
flex: 0 0 80px;
width: 80px;
}
/* News strip: una columna con thumb horizontal */
.front-news-strip {
grid-template-columns: 1fr;
gap: 0;
}
.front-news-strip__item {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 12px;
padding: 14px 0;
border-left: none;
border-top: var(--front-rule-soft);
}
.front-news-strip__item:first-child {
border-top: none;
padding-top: 0;
}
.front-news-strip__item:nth-child(2n+1) {
border-left: none;
padding-left: 0;
}
.front-news-strip__media {
display: block;
flex: 0 0 80px;
width: 80px;
aspect-ratio: 4 / 3;
border-radius: 4px;
overflow: hidden;
}
.front-news-strip__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.front-news-strip__copy {
flex: 1;
min-width: 0;
}
/* Latest: lista horizontal */
.front-latest-grid,
.section-story-grid {
grid-template-columns: 1fr;
gap: 0;
}
.front-latest-card {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 12px;
padding: 14px 0;
border-top: var(--front-rule-soft);
}
.front-latest-card:first-child {
border-top: none;
padding-top: 0;
}
.front-latest-card__media {
flex: 0 0 88px;
width: 88px;
aspect-ratio: 4 / 3;
border-radius: 4px;
overflow: hidden;
}
.front-latest-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Ciudad: 1 columna */
.front-city-grid {
grid-template-columns: 1fr;
}
/* Signature notes: horizontal */
.front-signature-note {
display: flex;
flex-direction: row;
gap: 12px;
align-items: flex-start;
grid-template-columns: unset;
}
.front-signature-note__media {
flex: 0 0 88px;
width: 88px;
aspect-ratio: 4 / 3;
border-radius: 4px;
overflow: hidden;
}
.front-signature-note__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.front-signature-note__copy {
flex: 1;
min-width: 0;
}
/* Paddings internos */
.front-compact-stack,
.front-section-block,
.front-signature-card,
.front-signature-stack,
.front-city-card,
.front-city-desk__rail {
padding: 14px;
}
.front-main {
padding-top: 14px;
}
/* Location modal */
.front-location-modal__panel {
margin-top: 40px;
padding: 20px;
}
.front-location-form__actions {
flex-direction: column;
align-items: stretch;
}
.front-location-form__submit,
.front-location-form__reset {
text-align: center;
}
/* Tipografia */
.front-headline-xl {
max-width: none;
font-size: clamp(30px, 9vw, 42px);
line-height: 1.02;
}
.front-headline-lg {
font-size: clamp(22px, 6.5vw, 30px);
}
.front-headline-md {
font-size: clamp(15px, 4.5vw, 20px);
}
.front-summary,
.section-hero__summary,
.article-deck {
font-size: 15px;
line-height: 1.5;
}
.front-newsbar__item {
border-left: none;
border-top: 1px solid #ddd6ca;
padding: 10px 0 0;
min-height: 0;
}
.front-newsbar__item:first-child {
border-top: none;
padding-top: 0;
}
.front-footer__grid {
grid-template-columns: 1fr;
gap: 26px;
}
.front-footer__coverage {
grid-column: auto;
}
.article-body {
font-size: 17px;
line-height: 1.75;
}
}
/* ══════════════════════════════════════════════
MOBILE ≤480px — Phones pequenos
══════════════════════════════════════════════ */
@media (max-width: 480px) {
:root {
--front-shell-padding: 12px;
}
.front-shell {
padding-bottom: 24px;
}
.front-topbar {
font-size: 11px;
}
.front-masthead {
padding: 10px 0 10px;
}
.front-masthead__edition {
font-size: 10px;
letter-spacing: 0.14em;
}
.front-nav__link {
height: 28px;
padding: 0 12px;
font-size: 11px;
}
/* Latest: 2 columnas compactas */
.front-latest-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.front-latest-card {
flex-direction: column;
gap: 0;
border-top: none;
padding-top: 0;
}
.front-latest-card__media {
flex: none;
width: 100%;
}
/* Hero cards mas compactos */
.front-hero-card__media {
flex: 0 0 68px;
width: 68px;
}
/* News strip thumb mas pequeno */
.front-news-strip__media {
flex: 0 0 68px;
width: 68px;
}
.front-identity-bar {
grid-template-columns: 1fr;
gap: 10px;
}
.front-masthead__tagline {
font-size: 11px;
line-height: 1.45;
}
.front-footer__brand {
font-size: clamp(40px, 15vw, 72px);
}
.front-footer__brief p {
font-size: 16px;
}
.front-footer__links {
flex-direction: row;
flex-wrap: wrap;
}
.front-kicker,
.section-hero__kicker,
.article-kicker {
font-size: 10px;
letter-spacing: 0.14em;
}
.front-meta,
.article-meta,
.front-latest-block__count {
font-size: 11px;
}
.front-latest-block__header {
display: grid;
gap: 6px;
}
.section-heading,
.article-title {
font-size: clamp(26px, 8.5vw, 34px);
}
}