/*
Theme Name: HXT Editorial Lite
Theme URI: https://example.com/hxt-editorial-lite
Author: Marina / ChatGPT
Description: Tema editorial rápido para WordPress con enfoque mobile-first, estética magazine internacional/urbana, tipografía editorial tipo display y soporte para logo imagen hover. No incluye logos, textos, imágenes ni código propietario de terceros.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: hxt-editorial-lite
*/

:root {
  --hx-bg: #fff;
  --hx-ink: #050505;
  --hx-muted: #666;
  --hx-line: #e7e3df;
  --hx-soft: #f6f2ee;
  --hx-accent: #ff3b1f;
  --hx-max: 1280px;
  --hx-gap: clamp(18px, 2vw, 34px);
  --hx-radius: 0px;
  --hx-font: Inter, Arial, Helvetica, sans-serif;
  /* Canela Display es una fuente comercial: si la tienes, súbela/localízala y WordPress la usará con este nombre. */
  --hx-display: "Canela Display", "Canela", "Canela Deck", "Bodoni 72", Didot, "DM Serif Display", Georgia, serif;
  --hx-serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--hx-bg);
  color: var(--hx-ink);
  font-family: var(--hx-font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.hx-lock { overflow: hidden; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
button, input { font: inherit; }

.hx-container { width: min(calc(100% - 32px), var(--hx-max)); margin-inline: auto; }
.hx-skip { position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.hx-skip:focus { left:16px; top:16px; width:auto; height:auto; background:#fff; border:1px solid #000; padding:8px 10px; z-index:9999; }

.hx-topbar { border-bottom: 1px solid var(--hx-line); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.hx-topbar-inner { min-height: 34px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.hx-premium { font-weight: 850; }
.hx-login { color: var(--hx-muted); }

.hx-header { position: sticky; top: 0; z-index: 80; background: rgba(255,255,255,.96); backdrop-filter: blur(14px); border-bottom: 1px solid var(--hx-line); }
.hx-header-main { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; min-height: 82px; gap: 18px; }
 .hx-brand { font-family: var(--hx-display); font-size: clamp(38px, 6vw, 82px); line-height: .78; letter-spacing: -.065em; font-weight: 500; text-transform: uppercase; justify-self:center; display:inline-grid; place-items:center; position:relative; min-width:min(72vw, 520px); }
.hx-brand:hover { text-decoration: none; }
.hx-brand-text { display:block; }
.hx-brand-logo { position:relative; display:block; width:min(66vw, 520px); height:auto; line-height:0; }
.hx-brand-logo img { display:block; width:100%; height:auto; max-height:74px; object-fit:contain; transition: opacity .22s ease, filter .22s ease, transform .22s ease; }
.hx-brand-logo .hx-logo-hover { position:absolute; inset:0; opacity:0; }
.hx-brand-logo.has-hover-logo:hover .hx-logo-main { opacity:0; }
.hx-brand-logo.has-hover-logo:hover .hx-logo-hover { opacity:1; }
.hx-brand-logo.no-hover-logo:hover .hx-logo-main { filter: invert(1) contrast(1.1); transform: translateY(-1px); }
.hx-menu-toggle { display:none; background:transparent; border:0; padding:12px 0; font-weight:900; text-transform:uppercase; letter-spacing:.06em; min-height:44px; }
.hx-search-link { justify-self:end; font-weight:850; text-transform:uppercase; font-size: 12px; letter-spacing:.08em; min-height:44px; display:flex; align-items:center; }

.hx-nav { border-top: 1px solid var(--hx-line); }
.hx-nav ul { list-style:none; margin:0; padding:0; display:flex; justify-content:center; gap: clamp(14px, 2.5vw, 32px); overflow:auto; white-space:nowrap; scrollbar-width:none; }
.hx-nav ul::-webkit-scrollbar { display:none; }
.hx-nav a { display:block; padding: 14px 0; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing:.06em; }

.hx-main { padding: 34px 0 68px; }
.hx-section-title { display:flex; align-items:end; justify-content:space-between; gap:20px; border-top: 3px solid var(--hx-ink); padding-top: 14px; margin: 50px 0 22px; }
.hx-section-title h2, .hx-section-title h1 { margin:0; font-family:var(--hx-display); font-size: clamp(34px, 5vw, 74px); font-weight:500; line-height: .82; letter-spacing:-.06em; text-transform:uppercase; }
.hx-section-title span { color: var(--hx-muted); text-transform: uppercase; font-size: 11px; font-weight: 900; letter-spacing:.1em; }

.hx-hero { display:grid; grid-template-columns: 1.35fr .85fr; gap: var(--hx-gap); align-items:start; }
.hx-hero-main { border-bottom: 1px solid var(--hx-line); padding-bottom: 18px; }
.hx-hero-main .hx-thumb { aspect-ratio: 16 / 10; }
.hx-hero-main .hx-card-title { font-family:var(--hx-display); font-size: clamp(52px, 8vw, 112px); font-weight:500; line-height:.78; letter-spacing:-.075em; margin-top: 14px; }
.hx-side-stack { display:grid; gap: 22px; }

.hx-card { display:block; min-width:0; }
.hx-thumb { aspect-ratio: 16 / 10; background: var(--hx-soft); overflow:hidden; border: 1px solid var(--hx-line); }
.hx-thumb img { width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.hx-card:hover .hx-thumb img, .hx-thumb:hover img { transform: scale(1.025); }
.hx-kicker { display:inline-flex; align-items:center; gap:8px; margin-top: 12px; font-size: 11px; font-weight: 950; text-transform: uppercase; letter-spacing:.1em; }
.hx-kicker:before { content:''; width:7px; height:7px; background:var(--hx-accent); border-radius:999px; }
.hx-card-title { margin: 8px 0 9px; font-family:var(--hx-display); font-size: clamp(28px, 3vw, 48px); line-height:.86; letter-spacing:-.052em; font-weight: 500; }
.hx-card-excerpt { margin: 0 0 10px; color: var(--hx-muted); font-size: 15px; }
.hx-meta { color: var(--hx-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing:.06em; }

.hx-ticker { margin: 30px 0 0; border-block: 1px solid var(--hx-ink); padding: 12px 0; overflow:hidden; }
.hx-ticker-track { display:flex; gap: 34px; width:max-content; animation: hx-marquee 28s linear infinite; }
.hx-ticker a { font-size: 12px; font-weight: 950; text-transform: uppercase; letter-spacing:.08em; white-space:nowrap; }
@media (prefers-reduced-motion: reduce) { .hx-ticker-track { animation:none; } .hx-thumb img { transition:none; } }
@keyframes hx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.hx-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hx-gap); }
.hx-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hx-list { display:grid; grid-template-columns: 1fr; border-top: 1px solid var(--hx-line); }
.hx-list-item { display:grid; grid-template-columns: 170px 1fr; gap: 22px; padding: 20px 0; border-bottom:1px solid var(--hx-line); }
.hx-list-item .hx-thumb { aspect-ratio: 1.1 / 1; }
.hx-list-item .hx-card-title { font-size: clamp(25px, 2.5vw, 38px); }

.hx-newsletter { margin: 64px 0; background: var(--hx-ink); color:#fff; padding: clamp(28px, 5vw, 62px); display:grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items:end; }
.hx-newsletter h2 { margin:0; font-family:var(--hx-display); font-size: clamp(44px, 7vw, 92px); font-weight:500; line-height:.78; letter-spacing:-.065em; text-transform:uppercase; }
.hx-newsletter p { color:#d8d8d8; margin:12px 0 0; }
.hx-form { display:flex; gap: 10px; }
.hx-form input { flex:1; min-width:0; padding: 15px 13px; border:1px solid #fff; background:#fff; color:#000; border-radius:0; }
.hx-form button, .hx-button { border:1px solid var(--hx-ink); background: var(--hx-ink); color:#fff; padding: 15px 16px; font-weight: 950; text-transform: uppercase; letter-spacing:.08em; cursor:pointer; border-radius:0; }
.hx-newsletter .hx-form button { border-color:#fff; }

.hx-content-layout { display:grid; grid-template-columns: minmax(0, 760px) 320px; gap: clamp(28px, 5vw, 72px); align-items:start; }
.hx-article-header { max-width: 980px; margin: 0 auto 28px; text-align:center; }
.hx-article-title { font-family:var(--hx-display); font-size: clamp(52px, 9vw, 124px); font-weight:500; line-height:.78; letter-spacing:-.075em; margin: 12px 0 16px; text-transform:uppercase; }
.hx-article-deck { font-size: clamp(18px, 2vw, 24px); color: var(--hx-muted); max-width: 760px; margin: 0 auto 14px; }
.hx-featured { margin: 26px auto 34px; width:min(100%, 1120px); }
.hx-featured img { width:100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hx-article-body { font-size: 18px; line-height: 1.78; }
.hx-article-body p { margin: 0 0 1.25em; }
.hx-article-body h2, .hx-article-body h3 { font-family:var(--hx-display); font-weight:500; line-height:.9; letter-spacing:-.05em; margin-top: 1.6em; }
.hx-article-body blockquote { border-left: 4px solid var(--hx-ink); margin: 30px 0; padding-left: 22px; font-family:var(--hx-display); font-size: clamp(28px, 4vw, 54px); line-height:.9; letter-spacing:-.05em; }
.hx-sidebar { position: sticky; top: 135px; border-top: 3px solid var(--hx-ink); padding-top: 14px; }
.hx-sidebar h3 { margin:0 0 12px; font-family:var(--hx-display); font-weight:500; text-transform:uppercase; letter-spacing:-.04em; font-size:34px; line-height:.9; }

.hx-pagination { margin-top: 38px; display:flex; justify-content:center; gap:10px; }
.hx-pagination .page-numbers { border:1px solid var(--hx-line); padding:8px 12px; font-weight:850; }
.hx-pagination .current { background:var(--hx-ink); color:#fff; }

.hx-footer { border-top:1px solid var(--hx-line); padding: 44px 0 28px; }
.hx-footer-grid { display:grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 28px; }
.hx-footer-brand { font-family:var(--hx-display); font-size: clamp(44px, 7vw, 92px); line-height:.78; font-weight:500; letter-spacing:-.075em; text-transform:uppercase; }
.hx-footer h4 { margin:0 0 10px; text-transform:uppercase; letter-spacing:.06em; }
.hx-footer ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; color:var(--hx-muted); }
.hx-copy { margin-top: 36px; color: var(--hx-muted); font-size: 12px; text-transform:uppercase; letter-spacing:.05em; }

@media (max-width: 900px) {
  .hx-header-main { grid-template-columns: auto 1fr auto; min-height: 64px; }
  .hx-brand { justify-self:center; font-size: clamp(34px, 12vw, 54px); letter-spacing:-.055em; min-width:min(64vw, 360px); }
  .hx-brand-logo { width:min(62vw, 360px); }
  .hx-brand-logo img { max-height:46px; }
  .hx-menu-toggle { display:flex; align-items:center; }
  .hx-search-link { font-size:0; }
  .hx-search-link:after { content:'Buscar'; font-size:11px; letter-spacing:.08em; }
  .hx-nav { display:block; position:fixed; inset:65px 0 0; background:rgba(255,255,255,.98); transform:translateY(-105%); transition:transform .25s ease; border-top:1px solid var(--hx-line); overflow:auto; z-index:100; }
  .hx-nav.is-open { transform:translateY(0); }
  .hx-nav .hx-container { width:100%; }
  .hx-nav ul { flex-direction:column; align-items:stretch; gap:0; padding: 6px 16px 24px; overflow:visible; white-space:normal; }
  .hx-nav li { width:100%; border-bottom: 1px solid var(--hx-line); }
  .hx-nav a { font-family:var(--hx-display); font-size: clamp(38px, 12vw, 72px); font-weight:500; line-height:.86; letter-spacing:-.06em; padding: 16px 0 14px; text-transform:uppercase; }
  .hx-hero, .hx-content-layout, .hx-newsletter { grid-template-columns:1fr; }
  .hx-grid, .hx-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-sidebar { position:static; }
  .hx-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .hx-container { width:min(calc(100% - 22px), var(--hx-max)); }
  .hx-topbar { display:none; }
  .hx-main { padding-top: 14px; padding-bottom:84px; }
  .hx-header-main { min-height:58px; }
  .hx-brand { min-width:min(58vw, 300px); }
  .hx-brand-logo { width:min(56vw, 300px); }
  .hx-brand-logo img { max-height:40px; }
  .hx-nav { inset:59px 0 0; }
  .hx-hero { display:block; }
  .hx-hero-main { padding-bottom: 22px; margin-bottom: 8px; border-bottom: 1px solid var(--hx-ink); }
  .hx-hero-main .hx-thumb { aspect-ratio: 4 / 5; margin-inline:-11px; border-inline:0; }
  .hx-hero-main .hx-card-title { font-size: clamp(54px, 18vw, 82px); line-height:.76; letter-spacing:-.075em; margin-top: 12px; }
  .hx-card-title { font-size: clamp(34px, 10vw, 52px); line-height:.82; }
  .hx-card-excerpt { font-size: 15px; }
  .hx-side-stack { gap:0; }
  .hx-side-stack .hx-card { display:grid; grid-template-columns: 42% 1fr; gap:13px; padding:16px 0; border-bottom:1px solid var(--hx-line); align-items:start; }
  .hx-side-stack .hx-card a { display:contents; }
  .hx-side-stack .hx-thumb { grid-row:1 / span 3; aspect-ratio: 3 / 4; }
  .hx-side-stack .hx-kicker { margin-top:0; align-self:start; }
  .hx-side-stack .hx-card-title { font-size: clamp(28px, 8vw, 40px); margin:3px 0 0; }
  .hx-side-stack .hx-meta { grid-column:2; }
  .hx-ticker { margin-top:18px; padding:10px 0; }
  .hx-section-title { margin: 36px 0 16px; padding-top:12px; }
  .hx-section-title h2, .hx-section-title h1 { font-size: clamp(42px, 14vw, 66px); line-height:.78; }
  .hx-grid, .hx-grid--four { grid-template-columns:1fr; gap:28px; }
  .hx-grid .hx-thumb, .hx-grid--four .hx-thumb { aspect-ratio: 4 / 5; margin-inline:-11px; border-inline:0; }
  .hx-list-item { grid-template-columns: 36% 1fr; gap: 13px; padding: 16px 0; }
  .hx-list-item .hx-thumb { aspect-ratio: 3 / 4; }
  .hx-list-item .hx-kicker { margin-top:0; }
  .hx-list-item .hx-card-title { font-size: clamp(26px, 8vw, 38px); line-height:.84; }
  .hx-newsletter { margin: 48px -11px; padding:34px 20px; }
  .hx-newsletter h2 { font-size: clamp(52px, 16vw, 78px); }
  .hx-form { flex-direction:column; }
  .hx-form input, .hx-form button { min-height:50px; }
  .hx-article-header { text-align:left; margin-bottom:20px; }
  .hx-article-title { font-size: clamp(54px, 17vw, 88px); line-height:.76; }
  .hx-article-deck { font-size:18px; line-height:1.35; }
  .hx-featured { margin-inline:-11px; width:auto; }
  .hx-featured img { aspect-ratio: 4 / 5; }
  .hx-article-body { font-size: 18px; line-height:1.68; }
  .hx-article-body p:first-of-type::first-letter { font-family:var(--hx-display); float:left; font-size:4.6em; line-height:.72; padding:.06em .09em 0 0; }
  .hx-footer-grid { grid-template-columns: 1fr; }
  .hx-footer-brand { font-size: clamp(56px, 18vw, 90px); }
}