@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Oswald:wght@400;500;600;700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap'); /* ============================================================ VARIABLES ============================================================ */ :root { /* Paleta Constructivista */ --hueso: #F5F0E8; --hueso-soft: #FAF7F2; --sovietico: #B52B1B; --sovietico-dark:#8C1E10; --pizarra: #1F1F1F; --pizarra-mid: #2C2C2C; --oliva: #4A5240; --mostaza: #B8860B; --siena: #4A4030; --gris: #888880; --papel: #C8BEA8; --papel-soft: rgba(200,190,168,.35); --line: rgba(200,190,168,.5); /* Tipografía */ --font-display: 'Cormorant Garamond', serif; --font-label: 'Oswald', sans-serif; --font-body: 'Libre Baskerville', serif; /* Sombras */ --shadow-sm: 0 2px 8px rgba(31,31,31,.08); --shadow: 0 8px 32px rgba(31,31,31,.12); --shadow-lg: 0 24px 64px rgba(31,31,31,.18); /* Forma */ --radius: 4px; --radius-lg: 8px; /* Layout */ --container: 1280px; --col-pad: 18px; /* Escala de espaciado vertical */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 40px; --space-xl: 64px; } /* ============================================================ RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--hueso); color: var(--siena); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } /* Selección de texto en la paleta */ ::selection { background: rgba(181,43,27,.18); color: var(--pizarra); } /* ============================================================ CONTENEDOR ============================================================ */ .container { width: min(calc(100% - 40px), var(--container)); margin: 0 auto; } /* ============================================================ TOPBAR ============================================================ */ .topbar { position: sticky; top: 0; z-index: 200; background: var(--pizarra); border-bottom: 2px solid var(--sovietico); } .topbar__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; min-height: 56px; } .topbar__left { display: flex; align-items: center; gap: 0; overflow: hidden; padding-left: var(--col-pad); min-width: 0; } .topbar__logo { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--hueso); letter-spacing: -.02em; white-space: nowrap; /* Estado colapsado por defecto (solo se expande al scrollear en index) */ max-width: 0; opacity: 0; margin-right: 0; transition: max-width .45s cubic-bezier(.4,0,.2,1), opacity .3s ease, margin-right .45s cubic-bezier(.4,0,.2,1); } .topbar__date { font-family: var(--font-label); font-size: .72rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s ease; } .topbar__actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; padding-right: var(--col-pad); } /* ── Estado scrolled (clase puesta por JS en ) ─────── */ body.scrolled .topbar__logo { max-width: 200px; opacity: 1; margin-right: 14px; } body.scrolled .topbar__date { opacity: .6; } /* ── Variante: páginas sin brandbar (nota.html) muestran el logo siempre ── */ body.no-brandbar .topbar__logo { max-width: 200px; opacity: 1; margin-right: 14px; } .social-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 1rem; color: var(--gris); transition: color .2s; } .social-icon:hover { color: var(--hueso); } /* Hamburger */ .icon-button { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: none; border: 1px solid rgba(200,190,168,.2); border-radius: var(--radius); cursor: pointer; transition: border-color .2s, background .2s; } .icon-button:hover { border-color: rgba(200,190,168,.4); background: rgba(255,255,255,.04); } .icon-button span { display: block; width: 20px; height: 1.5px; background: var(--hueso); border-radius: 999px; } /* Botón cerrar (X) — oculto por defecto, solo visible en mobile drawer */ .nav-close { display: none; } /* ============================================================ BRANDBAR ============================================================ */ .brandbar { background: var(--pizarra); border-bottom: 1px solid rgba(200,190,168,.12); } .brandbar__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: clamp(8px, 1.5vw, 20px) 0; } .brandbar__left { display: flex; flex-direction: column; max-width: 20%; gap: 4px; min-width: 0; } .brandbar__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.2rem, 7vw, 7rem); line-height: .92; letter-spacing: -.02em; color: var(--hueso); margin-left: -.05em; /* compensa side bearing de Cormorant en mayúsculas */ } .brandbar__right { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-right: var(--col-pad); padding-bottom: 6px; } .brandbar__tag { font-family: var(--font-label); font-size: .68rem; letter-spacing: .02em; text-transform: uppercase; color: var(--sovietico); } /* Buscador */ .search-box { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid rgba(200,190,168,.2); border-radius: var(--radius); background: rgba(255,255,255,.04); min-width: min(360px, 32vw); transition: border-color .2s; } .search-box:focus-within { border-color: rgba(200,190,168,.5); } .search-box i { color: var(--gris); font-size: .85rem; } .search-box input { width: 100%; background: transparent; border: none; color: var(--hueso); outline: none; font-family: var(--font-label); font-size: .82rem; letter-spacing: .05em; } .search-box input::placeholder { color: var(--gris); } /* ============================================================ NAV ============================================================ */ .main-nav { background: var(--pizarra-mid); } .main-nav__inner-container { display: flex; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: none; width: min(calc(100% - 40px), var(--container)); margin: 0 auto; } .main-nav__inner-container::-webkit-scrollbar { display: none; } .main-nav a { display: inline-block; padding: 13px var(--col-pad); font-family: var(--font-label); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); transition: color .2s, background .2s; white-space: nowrap; } .main-nav a:hover { color: var(--hueso); background: rgba(255,255,255,.04); } .main-nav a.active { color: var(--sovietico); } /* ============================================================ LAYOUT PRINCIPAL ============================================================ */ .site-body { padding: var(--space-lg) 0 var(--space-xl); } .layout-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) 320px; gap: var(--space-lg); align-items: start; } .content-main { display: flex; flex-direction: column; gap: 48px; } .content-sidebar { display: flex; flex-direction: column; gap: 32px; } /* ============================================================ SECTION HEADING ============================================================ */ .section-heading { display: flex; align-items: baseline; gap: 16px; margin-bottom: var(--space-md); padding-bottom: 12px; border-bottom: 2px solid var(--pizarra); } .section-heading h2 { font-family: var(--font-label); font-size: .8rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--pizarra); } .section-heading__line { flex: 1; height: 1px; background: var(--papel); } .section-kicker { font-family: var(--font-label); font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--sovietico); display: block; margin-bottom: 6px; } /* ============================================================ HERO ============================================================ IMPORTANTE: El JS (main.js → renderHero) renderiza solo .hero__main. La grid era 1.4fr / 0.85fr y el background del propio .hero era var(--papel) → eso pintaba la columna vacía con un rectángulo beige. Pasamos a una sola columna con background transparente. Si en el futuro querés volver al layout asimétrico con una segunda nota destacada, agregá la clase modificadora .hero--split y descomentá el bloque de abajo: el JS tendría que volver a renderizar .hero__side. ============================================================ */ .hero { display: block; background: transparent; border: 1px solid var(--papel); overflow: hidden; border-radius: var(--radius-lg); position: relative; } /* Variante futura: dos columnas (hero principal + 2 mini-cards) .hero--split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .85fr); gap: 2px; background: var(--papel); } */ .hero__main { display: block; background: var(--pizarra); position: relative; overflow: hidden; min-height: clamp(360px, 48vw, 520px); transition: background .3s; } .hero__main:hover { background: #252525; } .hero__media { position: absolute; inset: 0; background-color: var(--pizarra); overflow: hidden; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .5s cubic-bezier(.4,0,.2,1); } .hero__main:hover .hero__media img { transform: scale(1.03); } .hero__body { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 32px); background: linear-gradient(0deg, rgba(31,31,31,.88) 0%, rgba(31,31,31,.4) 60%, transparent 100%); } .hero__body .section-kicker { color: var(--sovietico); } .hero__body h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.08; color: var(--hueso); margin: 10px 0 14px; letter-spacing: -.01em; } .hero__body p { color: var(--papel); font-size: clamp(.9rem, 1.2vw, 1rem); line-height: 1.65; max-width: 65ch; } /* (Reservado para .hero--split, sin uso por ahora) */ .hero__side { display: grid; grid-template-rows: 1fr 1fr; gap: 2px; background: var(--papel); } .hero__side-card { display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; background: var(--hueso-soft); transition: background .2s; position: relative; } .hero__side-card:hover { background: #EFEADF; } .hero__side-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; color: var(--pizarra); margin: 8px 0; } .hero__side-card p { color: var(--gris); font-size: .85rem; line-height: 1.55; } /* ============================================================ NEWS GRID ============================================================ */ .news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--papel); border: 1px solid var(--papel); border-radius: var(--radius-lg); overflow: hidden; } .news-card { display: block; background: var(--hueso-soft); transition: background .2s; } .news-card:hover { background: var(--hueso); } .news-card__media { aspect-ratio: 16 / 9; background-color: var(--pizarra-mid); position: relative; overflow: hidden; } .news-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .5s cubic-bezier(.4,0,.2,1); } .news-card:hover .news-card__media img { transform: scale(1.03); } .news-card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(31,31,31,.7) 0%, rgba(31,31,31,0) 60%); } .news-card__body { padding: 20px 22px 24px; border-top: 1px solid var(--papel); } .news-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.22rem; line-height: 1.2; color: var(--pizarra); margin: 8px 0; } .news-card p { color: var(--gris); font-size: .85rem; line-height: 1.6; } /* ============================================================ TOPIC GRID ============================================================ */ .topic-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .topic-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: var(--pizarra); border-radius: var(--radius-lg); border-left: 3px solid var(--sovietico); min-height: 200px; transition: transform .2s, border-color .2s; } .topic-card:hover { transform: translateY(-2px); border-color: var(--mostaza); } .topic-card .section-kicker { color: var(--mostaza); } .topic-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.2; color: var(--hueso); margin-top: auto; } .topic-card p { color: var(--gris); font-size: .85rem; line-height: 1.6; } /* ============================================================ SPOTLIGHT (opinión / cultura) ============================================================ */ .split-section { display: grid; grid-template-columns: 1fr; gap: 16px; } .spotlight-card { padding: 28px; border-radius: var(--radius-lg); position: relative; overflow: hidden; transition: transform .2s; } .spotlight-card:hover { transform: translateY(-2px); } .spotlight-card--light { background: var(--hueso-soft); border: 1px solid var(--papel); } .spotlight-card--dark { background: var(--pizarra); border: 1px solid rgba(200,190,168,.08); } .spotlight-card h3 { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; line-height: 1.15; margin: 10px 0 12px; } .spotlight-card--light h3 { color: var(--pizarra); } .spotlight-card--dark h3 { color: var(--hueso); } .spotlight-card p { font-size: .9rem; line-height: 1.7; } .spotlight-card--light p { color: var(--gris); } .spotlight-card--dark p { color: var(--papel); opacity: .7; } .spotlight-card a { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-family: var(--font-label); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .spotlight-card--light a { color: var(--sovietico); } .spotlight-card--dark a { color: var(--mostaza); } /* ============================================================ SIDEBAR ============================================================ */ .sidebar-card { padding: 24px; border-radius: var(--radius-lg); background: var(--hueso-soft); border: 1px solid var(--papel); } .sidebar-card--dark { background: var(--pizarra); border-color: rgba(200,190,168,.08); } .sidebar-heading { font-family: var(--font-label); font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); padding-bottom: 14px; border-bottom: 1px solid var(--papel); margin-bottom: 20px; } .sidebar-card--dark .sidebar-heading { color: var(--gris); border-bottom-color: rgba(200,190,168,.12); } /* Stack list */ .stack-list { display: flex; flex-direction: column; } .stack-list__item { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--papel); transition: padding-left .2s; } .stack-list__item:last-child { border-bottom: none; padding-bottom: 0; } .stack-list__item:hover { padding-left: 6px; } .stack-list__meta { font-family: var(--font-label); font-size: .65rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sovietico); } .stack-list__item h4 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.25; color: var(--pizarra); } /* Tags */ .tags { display: flex; flex-wrap: wrap; gap: 8px; } .tag { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--radius); background: rgba(200,190,168,.15); border: 1px solid rgba(200,190,168,.3); color: var(--papel); font-family: var(--font-label); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .tag:hover { background: rgba(181,43,27,.2); color: var(--hueso); border-color: var(--sovietico); } /* Newsletter */ .newsletter-form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .newsletter-form input { padding: 12px 16px; border: 1px solid rgba(200,190,168,.2); border-radius: var(--radius); background: rgba(255,255,255,.04); color: var(--hueso); outline: none; font-family: var(--font-label); font-size: .82rem; letter-spacing: .04em; transition: border-color .2s; } .newsletter-form input::placeholder { color: var(--gris); } .newsletter-form input:focus { border-color: rgba(200,190,168,.5); } .newsletter-form button { padding: 12px 16px; border: none; border-radius: var(--radius); background: var(--sovietico); color: var(--hueso); font-family: var(--font-label); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .2s; } .newsletter-form button:hover { background: var(--sovietico-dark); } .sidebar-copy { font-size: .88rem; line-height: 1.65; color: var(--papel); opacity: .75; } /* ============================================================ PÁGINA DE NOTA ============================================================ */ .article-page { padding: 48px 0 72px; } .article-wrapper { max-width: 780px; margin: 0 auto; } .back-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-label); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin-bottom: 32px; transition: color .2s, gap .2s; } .back-link:hover { color: var(--sovietico); gap: 12px; } .article-header { margin-bottom: 36px; text-align: center; } .article-header .section-kicker { margin-bottom: 12px; text-align: center; } .article-header h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.08; color: var(--pizarra); letter-spacing: -.015em; margin-bottom: 18px; } .article-lead { font-family: var(--font-body); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.5; color: var(--siena); margin-bottom: 24px; max-width: 56ch; margin-inline: auto; } .article-meta-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; justify-content: center; padding: 14px 1px; border-top: 1px solid var(--papel); border-bottom: 1px solid var(--papel); font-family: var(--font-label); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); } .article-meta-bar strong { color: var(--pizarra); font-weight: 600; } .article-cover-figure { float: left; width: 45%; margin: 8px 28px 16px 0; } .article-cover { width: 100%; border-radius: var(--radius-lg); display: block; } .article-cover-credit { font-family: var(--font-label); font-size: .72rem; letter-spacing: .06em; color: var(--gris); text-align: right; margin-top: 5px; } /* Cuerpo del artículo */ .article-body h2 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; color: var(--pizarra); margin: 40px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--papel); } .article-body p { margin-bottom: 20px; font-size: 1.05rem; line-height: 1.85; color: var(--siena); text-align: justify; hyphens: auto; -webkit-hyphens: auto; } .article-body p:first-of-type::first-letter { font-family: var(--font-display); font-weight: 600; font-size: 3.4rem; line-height: .9; float: left; color: var(--pizarra); padding: 4px 10px 0 0; } .article-body strong { color: var(--pizarra); } .article-body em { color: var(--siena); } .article-body a { color: var(--sovietico); border-bottom: 1px solid rgba(181,43,27,.3); transition: border-color .2s; } .article-body a:hover { border-color: var(--sovietico); } .article-body blockquote { margin: 32px 0; padding: 20px 24px; border-left: 3px solid var(--sovietico); background: var(--hueso-soft); border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; font-size: 1.2rem; color: var(--siena); line-height: 1.6; } .article-body blockquote p { text-align: left; hyphens: none; } .article-body blockquote p:first-of-type::first-letter { all: unset; } .article-body ul, .article-body ol { margin: 0 0 20px 24px; color: var(--siena); font-size: 1.05rem; line-height: 1.85; } .article-body li { margin-bottom: 6px; } .article-body img { border-radius: var(--radius-lg); margin: 24px 0; } .article-body::after { content: ''; display: block; clear: both; } /* Notas relacionadas */ .relacionadas { margin-top: 56px; padding-top: 24px; border-top: 2px solid var(--pizarra); } .relacionadas__title { font-family: var(--font-label); font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); margin-bottom: 20px; } .relacionadas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .relacionada-card { padding: 18px; background: var(--hueso-soft); border: 1px solid var(--papel); border-radius: var(--radius-lg); transition: border-color .2s, transform .2s; } .relacionada-card:hover { border-color: var(--sovietico); transform: translateY(-2px); } .relacionada-card h4 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: var(--pizarra); margin-top: 6px; } /* ============================================================ PÁGINA DE SECCIÓN (/cultura, /politica, etc.) ============================================================ */ .seccion-page { padding: 48px 0 72px; } .seccion-header { padding-bottom: var(--space-md); margin-bottom: var(--space-lg); border-bottom: 2px solid var(--pizarra); } .seccion-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.05; color: var(--pizarra); letter-spacing: -.02em; margin: 8px 0 14px; } .seccion-desc { font-size: .95rem; line-height: 1.7; color: var(--gris); max-width: 60ch; } .seccion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1px; background: var(--papel); border: 1px solid var(--papel); border-radius: var(--radius-lg); overflow: hidden; } .seccion-status { grid-column: 1 / -1; padding: 48px 0; text-align: center; font-family: var(--font-label); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); background: var(--hueso-soft); } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--pizarra); color: var(--papel); padding: 56px 0 32px; margin-top: 0; border-top: 2px solid var(--sovietico); } .site-footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(200,190,168,.12); } .site-footer__brand { font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; line-height: 1; color: var(--hueso); letter-spacing: -.02em; margin-bottom: 12px; } .site-footer__tag { font-family: var(--font-label); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sovietico); margin-bottom: 16px; } .site-footer p { font-size: .9rem; line-height: 1.65; color: var(--papel); opacity: .75; max-width: 38ch; } .site-footer__col h4 { font-family: var(--font-label); font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); margin-bottom: 16px; } .site-footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .site-footer__col a { font-family: var(--font-label); font-size: .82rem; letter-spacing: .06em; color: var(--papel); opacity: .8; transition: color .2s, opacity .2s; } .site-footer__col a:hover { color: var(--hueso); opacity: 1; } .site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 24px; font-family: var(--font-label); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); } .site-footer__socials { display: flex; gap: 12px; } /* ============================================================ UTILIDADES ============================================================ */ .hidden { display: none !important; } /* ============================================================ RESPONSIVE ============================================================ */ /* === Tablet ancho ≤ 1100px === */ @media (max-width: 1100px) { .layout-grid { grid-template-columns: 1fr; gap: var(--space-lg); } /* Sidebar pasa a 2 columnas (no 3 — solo hay 2 cards) */ .content-sidebar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: start; } .topic-grid { grid-template-columns: 1fr 1fr; } } /* === Tablet medio ≤ 860px === */ @media (max-width: 860px) { .news-grid { grid-template-columns: 1fr; } .split-section { grid-template-columns: 1fr; } .content-sidebar { grid-template-columns: 1fr; } .brandbar__left { max-width: 35%;} .brandbar__inner { flex-direction: row; align-items: center; gap: 30px; } .brandbar__right { align-items: center; padding-right: var(--col-pad); padding-left: 0; width: 100%; } .search-box { min-width: 0; width: 100%; max-width: 100%; } .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; } /* Cover de artículo: dejar de flotar y ocupar todo el ancho */ .article-cover-figure { float: none; width: 100%; margin: 0 0 24px; } .article-body p:first-of-type::first-letter { font-size: 2.8rem; } } /* === Mobile ≤ 720px === */ @media (max-width: 720px) { .icon-button { display: flex; } /* El primer hijo del topbar (botón hamburguesa) viene antes del logo */ .topbar__inner { gap: 12px; } .topbar__left { padding-left: 0; } /* Overlay oscuro detrás del drawer */ .nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 250; opacity: 0; transition: opacity .3s ease; } .nav-overlay.is-open { display: block; opacity: 1; } /* Drawer lateral */ .main-nav { position: fixed; top: 0; left: 0; height: 100dvh; width: 78vw; max-width: 320px; background: var(--pizarra); z-index: 300; transform: translateX(-100%); transition: transform .35s cubic-bezier(.4,0,.2,1); padding-top: 64px; box-shadow: 4px 0 24px rgba(0,0,0,.4); overflow-y: auto; } .main-nav.is-open { transform: translateX(0); } /* Botón cerrar (X) dentro del drawer */ .nav-close { display: block; position: absolute; top: 14px; right: 14px; background: none; border: none; color: var(--hueso); font-size: 1.4rem; cursor: pointer; padding: 6px; opacity: .7; transition: opacity .2s; } .nav-close:hover { opacity: 1; } /* Links dentro del drawer */ .main-nav__inner-container { display: flex; flex-direction: column; width: 100%; margin: 0; } .main-nav__inner-container a { border-bottom: 1px solid rgba(200,190,168,.07); padding: 16px 24px; font-size: .85rem; letter-spacing: .1em; } .main-nav__inner-container a:last-child { border-bottom: none; } /* Topbar más estrecha */ body.scrolled .topbar__date, body.no-brandbar .topbar__date { opacity: 0; pointer-events: none; } .topbar__logo { font-size: 1.1rem; } /* Hero: que el body no se trague la imagen */ .hero__body { padding: 24px 20px; } .hero__main { min-height: clamp(320px, 60vw, 420px); } /* Topic */ .topic-grid { grid-template-columns: 1fr 1fr; } /* Article tweaks */ .article-page { padding: 32px 0 56px; } .article-body p { font-size: 1rem; line-height: 1.75; } .article-body p:first-of-type::first-letter { font-size: 2.4rem; } /* Footer */ .site-footer__inner { grid-template-columns: 1fr; gap: 32px; } .site-footer__bottom { flex-direction: column; align-items: flex-start; } } /* === Mobile chico ≤ 420px === */ @media (max-width: 420px) { .topbar__date { font-size: .65rem; letter-spacing: .08em; } .brandbar__title { font-size: 3rem; } .article-header h1 { font-size: 2rem; } .article-lead { font-size: 1.05rem; } }