/* Reset lite */
*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --col: 760px;   /* ширина основной колонки текста */
  --sb: 380px;    /* ширина сайдбара */
  --gap: 56px;    /* зазор между колонкой и сайдбаром */
  --pad: 32px;    /* внутренние поля страницы слева/справа */
}
body{
  font-family: -apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  background:#ffffff;
  color:#000;
  line-height:1.45;
}

/* HEADER */
.site-header{
  background:#000a1a;
  color:#fff;
  font-size:14px;
}
.site-header__inner{
  max-width:1280px;
  margin:0 auto;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#fff;
}
.burger,.bell{
  display:flex;
  align-items:center;
  gap:8px;
  color:#fff;
  background:none;
  border:0;
  font-size:14px;
}
.bell img,.burger img{
  height:20px;
}
.brand{
  display:flex;
  align-items:center;
  gap:8px;
  color:#fff;
  font-weight:600;
  font-size:16px;
}
.brand__logo{ height:28px; }
.brand__section{ color:#fff;font-weight:600; }
.header-right{
  display:flex;
  align-items:center;
  gap:16px;
  margin-left:auto;
}
.login{
  display:flex;
  align-items:center;
  gap:6px;
  color:#5fd0ff;
  font-size:14px;
  font-weight:500;
}
.login__icon{ height:18px; }
.live-pill{
  display:flex;
  align-items:center;
  background:#c00000;
  border-radius:4px;
  padding:4px 8px;
  color:#fff;
  font-size:12px;
  font-weight:600;
  line-height:1;
  gap:5px;
}
.live-dot{ width:8px;height:8px;background:#ff4a4a;border-radius:50%; }

/* PAGE WRAP */
.page-wrap{
  /* ширина = колонка текста + зазор + сайдбар + боковые поля */
  max-width: calc(var(--col) + var(--gap) + var(--sb) + var(--pad)*2);
  margin: 24px auto 48px;
  padding: 0 var(--pad) 64px;
  display: block;
  background:#fff;
  color:#000;
  overflow-x: clip; /* чтобы ничего не вываливалось по горизонтали */
}

/* ARTICLE HERO (title + sidebar) */
.article-hero{
  display:grid;
  grid-template-columns: var(--col) var(--sb);
  column-gap: var(--gap);
  align-items:start;
}
.article-hero__main{
  grid-column: 1;
  min-width: 0;
}
.article-title{
  font-size:32px;
  font-weight:700;
  line-height:1.2;
  color:#000;
  margin-bottom:16px;
}
.article-sublead{
  font-size:20px;
  line-height:1.4;
  color:#444;
  margin-bottom:16px;
}
.article-meta{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:#555;
  margin-bottom:24px;
}
.article-meta .dot{
  width:8px;
  height:8px;
  background:#007bff;
  border-radius:50%;
}

/* SIDEBAR TOP */
.sidebar-top{
  grid-column: 2;      /* сайдбар во второй колонке */
  width: var(--sb);    /* фиксируем ширину, чтобы не схлопывался */
  max-width: var(--sb);
  border-top:3px solid #0057ff;
  padding-top:12px;
}
.sidebar-top__title{
  font-size:16px;
  font-weight:700;
  color:#000;
  margin-bottom:12px;
}
.toplist{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.toplist__item{ display:flex;align-items:flex-start;gap:12px; }
.toplist__index{
  color:#0057ff;
  font-size:20px;
  font-weight:700;
  min-width:20px;
}
.toplist__headline{ font-size:16px;font-weight:700;line-height:1.3;color:#000; }
.toplist__by{ font-size:13px;color:#444;margin-top:4px;line-height:1.3; }

/* BODY + ARTICLE TEXT */
.article-body-wrap{
  flex:1 1 auto;
  max-width: var(--col);
}
.article-hero-media{
  position:relative;
  background:#000;
  margin:16px 0;
  max-width: var(--col);
}
.article-hero-media__img{ width:100%;height:auto;display:block; }
.video-play-btn{
  position:absolute;
  left:16px; top:16px;
  background:#fff; border:0; border-radius:4px;
  font-size:28px; line-height:1; padding:8px 12px; font-weight:700; cursor:pointer;
}
.article-hero-media__caption{
  font-size:14px; color:#444; background:#fff; padding:12px 0 0; line-height:1.4;
}

.share-row{
  display:flex; align-items:center; gap:8px;
  font-size:16px; color:#000; font-weight:500;
  margin:16px 0 24px;
  max-width: var(--col);
}
.share-row__icon{ font-size:20px; }

.article-content p{
  font-size:18px; line-height:1.5; color:#000; margin-bottom:20px;
}
.article-content{ max-width: var(--col); }
.article-content strong{ font-weight:700;color:#000; }
.article-content em{ font-style:italic; }
.article-subhead{
  font-size:22px; font-weight:700; line-height:1.3; margin:32px 0 16px; color:#000;
}

/* related link ("Leé también:") */
.related-link{
  border-left:3px solid #0057ff;
  padding-left:12px;
  margin:24px 0;
  font-size:16px;
  line-height:1.4;
  max-width: var(--col);
}
.related-link__label{ color:#000;font-weight:700;margin-right:4px; }
.related-link__a{ color:#0057ff;text-decoration:none;font-weight:700; }

/* article photo blocks */
.article-photo{ margin:24px 0; max-width: var(--col); }
.article-photo__img{ width:100%;height:auto;display:block;margin-bottom:8px; }
.article-photo__cap{ font-size:14px;color:#555;line-height:1.4; }

/* tags block "Temas de la nota" */
.tags-block{
  border-top:2px solid #0057ff;
  margin-top:32px;
  padding-top:16px;
  max-width: var(--col);
}
.tags-block__title{ font-size:20px;font-weight:700;margin-bottom:16px; }
.tags-list{ display:flex; flex-wrap:wrap; gap:12px; }
.tag-pill{
  display:inline-block;
  border:2px solid #0057ff;
  border-radius:28px;
  color:#0057ff;
  font-weight:700;
  font-size:16px;
  padding:10px 16px;
  text-decoration:none;
  line-height:1.1;
}

/* more politics */
.more-politics{
  margin-top:32px;
  padding-top:16px;
  border-top:2px solid #dcdcdc;
  max-width: var(--col);
}
.more-politics__title{ font-size:20px;font-weight:700;margin-bottom:16px;color:#000; }
.more-politics__item{ display:flex; gap:16px; margin-bottom:24px; }
.more-politics__thumb{ position:relative; flex:0 0 240px; max-width:240px; background:#000; color:#fff; }
.more-politics__thumb img{ width:100%;height:auto;display:block;object-fit:cover; }
.thumb-play{
  position:absolute; left:12px; bottom:12px;
  background:#fff; color:#000; font-weight:700; font-size:18px; line-height:1;
  padding:6px 8px; border-radius:4px;
}
.more-politics__text{ flex:1; }
.more-politics__headline{ font-size:22px;font-weight:700;line-height:1.3;color:#000;margin-bottom:8px; }
.more-politics__by{ font-size:14px;color:#333; }

/* FOOTER */
.site-footer{
  background:#000a1a;
  color:#fff;
  margin-top:64px;
  padding-top:32px;
  font-size:14px;
}
.site-footer__inner{
  max-width:1280px;
  margin:0 auto;
  padding:0 16px 32px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:32px;
  color:#fff;
}
.footer-logo{ height:40px;margin-bottom:16px; }
.social-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.social-row img{ width:24px;height:24px; }
.store-row{ display:flex; flex-direction:column; gap:8px; }
.store-row img{ max-width:140px;height:auto;display:block; }
.footer-col h4{
  color:#5fd0ff; font-size:15px; font-weight:700; margin-bottom:12px;
  
}
.footer-links{ list-style:none; color:#fff; line-height:1.4; }
.footer-links li{ margin-bottom:8px; color:#fff; font-size:14px; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.2);
  color:#fff; max-width:1280px; margin:0 auto; padding:16px;
  font-size:13px; line-height:1.4;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px;
}
.footer-bottom__links{ color:#fff; }
.footer-bottom__links span{ color:#fff; }

/* RESPONSIVE tweaks */
@media(max-width:1024px){
  .article-hero{
    display:grid;
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .sidebar-top{
    grid-column: 1;
    width: auto;
    max-width: 100%;
  }
  .more-politics__item{ flex-direction:column; }
  .more-politics__thumb{ max-width:100%; }
}
.page-wrap {
  margin-left: 0;
  margin-right: auto;
  padding-left: 64px; /* небольшой внутренний отступ чтобы не прилипло в ноль */
}
/* === FIX: убираем белое поле под заголовком === */
.article-hero{
  position: relative;        /* контейнер для абсолютного сайдбара */
  display: block;            /* на всякий случай, чтобы строка не тянулась */
}

.sidebar-top{
  position: absolute;        /* вынимаем из потока */
  top: 0;
  right: 0;
  width: var(--sb);
  max-width: var(--sb);
}

.article-hero__main{
  padding-right: calc(var(--sb) + var(--gap));  /* чтобы текст не наехал на сайдбар */
}

/* На мобильных всё возвращаем в поток (твой current layout) */
@media (max-width: 1024px){
  .article-hero{ display: block; }
  .sidebar-top{
    position: static;
    width: auto;
    max-width: 100%;
    margin-top: 16px;
  }
  .article-hero__main{ padding-right: 0; }
}
.footer-links--cols2{
  column-count: 2;
  column-gap: 56px;          /* при необходимости подгони */
}
.footer-links--cols2 li{ break-inside: avoid; }
.footer-links--cols2 .col-break{
  break-after: column;
  height:0; margin:0; padding:0; list-style:none; border:0;
}
@media (max-width:1200px){
  .footer-links--cols2{ column-count:1; column-gap:0; }
  .footer-links--cols2 .col-break{ break-after:auto; }
}
/* Синие полосы под заголовками в футере */
.footer-col h4 {
  position: relative;
  font-size: 22px;
  font-weight: 800;
  color: #b4dcff; /* светло-голубой */
  margin-bottom: 16px;
}

.footer-col h4::after {
  content: "";
  display: block;
  height: 4px;
  width: 180px; /* ← увеличь это значение (160–220px выглядит как в оригинале TN) */
  margin-top: 8px;
  background: linear-gradient(90deg, #2f6dfd 70%, rgba(47, 109, 253, 0.2) 100%);
}
/* === FINAL TN FOOTER VISUAL FIX === */

/* базовый фон и шрифт */
.site-footer {
  background: #0b1324;
  color: #e4ebf3;
  font-family: "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
}

/* заголовки секций */
.site-footer .footer-col h4 {
  font-size: 22px;
  font-weight: 800;
  color: #cfe4ff;
  margin-bottom: 12px;
  position: relative;
}

/* синяя линия под заголовком */
.site-footer .footer-col h4::after {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  max-width: 230px;
  border-radius: 3px;
  margin-top: 8px;
  background: linear-gradient(90deg, #3a8bff 0%, #1d4ed8 100%);
}

/* ссылки в футере */
.site-footer .footer-links a {
  display: inline-block;
  color: #dbe6ff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer .footer-links a:hover {
  color: #3b82f6;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* spacing списков */
.site-footer .footer-links li {
  margin: 6px 0;
}

/* нижняя часть (копирайт + ссылки) */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 12px;
  margin-top: 30px;
  color: #a5b3c9;
  font-size: 14px;
}

.footer-bottom__links span,
.footer-bottom__links a {
  color: #8ca5d6;
  font-weight: 500;
}

.footer-bottom__links a:hover {
  color: #3b82f6;
}

/* адаптив — чтоб не ломался перенос */
@media (max-width: 1024px) {
  .site-footer .footer-col h4::after {
    max-width: 160px;
  }
}
/* === Вернуть вертикалки к реальному размеру и центрировать === */
.article-photo {
  max-width: var(--col);
  margin: 24px auto;
}

.article-photo__img,
.article-hero-media__img {
  display: block;
  margin: 0 auto 8px;
  width: auto !important;     /* ключевое: не растягивать по ширине */
  max-width: 100%;            /* но не давать вылезать за колонку */
  height: auto !important;    /* сохраняем пропорции */
}

/* опционально: чтобы портреты не были слишком высокими на десктопе */
@media (min-width: 769px){
  .article-photo__img { max-height: 680px; } /* хочешь — уменьши до 600 */
}
/* === ALERT BOX (⚠️ Aviso importante) === */
.alert-box {
  background: #fff7f7;
  border: 2px solid #e63946;
  padding: 16px 20px;
  margin: 32px auto;
  border-radius: 4px;
  color: #111;
  font-size: 18px;
  line-height: 1.5;
  max-width: var(--col);
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.alert-box strong {
  font-weight: 700;
  color: #000;
}

.alert-box a {
  color: #000;
  text-decoration: underline;
  font-weight: 600;
}

.alert-box a:hover {
  color: #e63946;
}
.alert-box {
  max-width: 450px;
  margin: 32px auto;
}
.alert-box {
  background: #fff7f7;
  border: 2px solid #e63946;
  padding: 14px 18px;
  margin: 32px auto;
  border-radius: 4px;
  color: #111;
  font-size: 12px;     /* ← меньше, чем основной текст */
  line-height: 1.5;
  max-width: 560px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.alert-box strong {
  font-weight: 700;
  color: #000;
}

.alert-box a {
  color: #000;
  text-decoration: underline;
  font-weight: 600;
}

.alert-box a:hover {
  color: #e63946;
}
/* === YELLOW NOTE BOX (⏳ Nota) === */
.note-box {
  background: #fffcf5 !important;
  border: 2px solid #f5a623 !important;
  padding: 14px 18px !important;
  margin: 32px auto !important;
  border-radius: 4px !important;
  color: #111 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  max-width: 560px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
  display: block !important;
}

.note-box strong {
  font-weight: 700 !important;
  color: #000 !important;
}

.note-box a {
  color: #000 !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

.note-box a:hover {
  color: #f5a623 !important;
}
/* === TELEGRAM CTA BUTTON === */
.tg-button {
  display: block;
  width: fit-content;
  margin: 28px auto;
  background: #2b73ff;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  padding: 18px 64px;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  border: 1px solid rgba(0,0,0,0.2);
  transition: background 0.2s ease, transform 0.15s ease;
}

.tg-button:hover {
  background: #1d5be5;
  transform: translateY(-2px);
}

.tg-button:active {
  transform: translateY(0);
}

/* адаптация под мобильные */
@media (max-width: 600px) {
  .tg-button {
    font-size: 22px;
    padding: 16px 40px;
    width: 90%;
  }
}
/* ===== MOBILE HARDENING (<=768px) ===== */

/* глобально — не даём появляться горизонтальному скроллу */
html, body {
  width: 100%;
  overflow-x: hidden;
  touch-action: pan-y;         /* только вертикальная прокрутка жестами */
}

/* на всякий случай: картинки никогда не шире экрана */
img {
  max-width: 100%;
  height: auto;
}

/* мобильные переменные и поля */
@media (max-width: 768px){
  :root{
    --pad: 16px;   /* сжимаем боковые отступы */
    --sb: 0px;     /* не нужен сайдбар */
    --gap: 0px;
  }

  /* основной контейнер — без левого «64px» и без вылетов */
  .page-wrap{
    padding-left: var(--pad);
    padding-right: var(--pad);
    margin: 16px auto 32px;
    overflow-x: clip;   /* подстраховка */
  }

  /* заголовочный блок: гриды в один столбец, сайдбар прячем */
  .article-hero{
    display: block;
    position: static;
  }
  .sidebar-top{
    display: none !important;   /* <-- убрать боковой сайдбар на мобилке */
  }
  .article-hero__main{
    padding-right: 0 !important;
  }

  /* фото-блоки и прочие широкие секции — вписываемся в экран */
  .article-photo,
  .article-hero-media,
  .related-link,
  .note-block,          /* твои плашки предупреждений, если используешь класс */
  .note-block--small,
  .tags-block,
  .more-politics{
    max-width: 100%;
  }

  /* сами изображения: по центру и без «разъезда» */
  .article-photo__img,
  .article-hero-media__img{
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;               /* центрируем вертикальные */
  }

  /* «Más sobre Política»: карточки в столбик */
  .more-politics__item{ flex-direction: column; }
  .more-politics__thumb{
    width: 100%;
    max-width: 100%;
  }

  /* футер в одну колонку */
  .site-footer__inner{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .footer-col{ min-width: 0; }
}