/* ══════════════════════════════════════════════════════════
   MAREA — Responsive
   Cargado al final; sobreescribe desktop-first por defecto.
   Breakpoints: 1200px / 1024px / 768px / 480px
══════════════════════════════════════════════════════════ */

/* ── 1200px — Layout compacto ────────────────────────────── */
@media (max-width: 1200px) {
  :root {
    --site-pad: 24px;
  }

  .hero-grid {
    grid-template-columns: 2fr 1fr;
  }

  .arc-name            { font-size: 52px; }
  .page-article-title  { font-size: 36px; }

  .footer-top {
    grid-template-columns: 200px 1fr 1fr 1fr;
    gap: 32px;
  }
}

/* ── 1024px — Tablet landscape ───────────────────────────── */
@media (max-width: 1024px) {
  /* Footer: 2-column layout before full collapse */
  .footer-top { grid-template-columns: 1fr 1fr; }

  /* Archive layout: colapsar sidebar */
  .arc-layout {
    grid-template-columns: 1fr !important;
  }

  .arc-sidebar {
    position: static !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }

  /* Featured grid: colapsar a 1 columna */
  .af-grid {
    grid-template-columns: 1fr !important;
  }

  .af-side {
    flex-direction: row !important;
    flex-wrap: wrap;
  }

  .af-side-item {
    flex: 1 1 calc(50% - 2px);
  }
}

/* ── 768px — Tablet portrait / Móvil grande ──────────────── */
@media (max-width: 768px) {
  :root {
    --site-pad:  16px;
    --header-h:  60px;
  }

  /* ── Fullscreen nav overlay ─────────────────────────────── */
  .primary-nav {
    position: fixed !important;
    inset: 0 !important;
    background: var(--ink) !important;
    z-index: calc(var(--z-header) + 10) !important;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: none !important;
    overflow-y: auto;
  }

  .primary-nav.is-open {
    display: flex !important;
  }

  .primary-nav ul {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    list-style: none;
  }

  .primary-nav li {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
  }

  .primary-nav li:first-child {
    border-top: 1px solid rgba(255,255,255,.06) !important;
  }

  .primary-nav a {
    font-family: var(--font-condensed) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--cream) !important;
    height: auto !important;
    padding: 18px var(--site-pad) !important;
    border-bottom: none !important;
    border-left: none !important;
    display: block !important;
    transition: color var(--t-fast) !important;
  }

  .primary-nav a:hover,
  .primary-nav a.current-menu-item,
  .primary-nav a.current-category-ancestor,
  .primary-nav a.active {
    color: var(--wave) !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
    background: transparent !important;
  }

  /* ── Hamburger → X ──────────────────────────────────────── */
  .nav-toggle {
    position: relative;
    z-index: calc(var(--z-header) + 20);
  }

  .nav-toggle span {
    transition: transform 0.22s ease, opacity 0.18s ease, background 0.15s ease;
  }

  .nav-toggle[aria-expanded="true"] span {
    background: var(--cream);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ── Hero ───────────────────────────────────────────────── */
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-main {
    min-height: 340px;
    padding: 24px 20px 28px;
  }

  .hero-side-wrapper { display: none; }

  .hero-title {
    font-size: 36px !important;
    letter-spacing: -0.5px !important;
    line-height: 1.02 !important;
  }

  .hero-excerpt { font-size: 14px !important; }

  /* ── Article hero (v2 class names) ─────────────────────── */
  .art-hero-img   { height: 260px !important; }
  .art-title      { font-size: 34px !important; line-height: 1.04 !important; }
  .art-excerpt    { display: none !important; }
  .art-hero-cnt   { padding: 0 var(--site-pad) 18px !important; }
  .art-share-row  { display: none !important; }

  /* Article layout: stack columns */
  .article-layout {
    grid-template-columns: 1fr !important;
    padding: 28px var(--site-pad) 0 !important;
    gap: 0 !important;
  }

  .article-sidebar { display: none !important; }

  /* ── Homepage sections ──────────────────────────────────── */
  .cards-row {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }

  .cat-cards {
    grid-template-columns: 1fr 1fr !important;
  }

  .opinion-grid {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }

  /* ── Archive v2 ─────────────────────────────────────────── */
  .arc-header     { padding: 36px var(--site-pad) 32px; }
  .arc-name       { font-size: 40px !important; }

  .arc-layout     { grid-template-columns: 1fr !important; padding-top: 20px; }
  .arc-sidebar    { position: static !important; grid-template-columns: 1fr !important; }

  .af-grid        { grid-template-columns: 1fr !important; }
  .af-side        { flex-direction: column !important; }
  .af-side-item   { flex: 1 1 100% !important; }
  .af-main        { min-height: 280px; }

  /* List items: colapsar a 1 columna */
  .al-item        { grid-template-columns: 1fr !important; }
  .al-img         { height: 180px !important; }
  .al-item.accent { border-left-width: 4px; }

  /* ── Search ─────────────────────────────────────────────── */
  .search-hero { padding: 36px var(--site-pad) 28px; }
  .search-big-input { font-size: 22px; padding: 14px 16px; }

  /* ── 404 ────────────────────────────────────────────────── */
  .e404-num { font-size: 130px !important; letter-spacing: -4px !important; }
  .e404-message { font-size: 30px !important; }

  /* ── Page ───────────────────────────────────────────────── */
  .page-article-title { font-size: 30px; }

  /* ── Related grid ───────────────────────────────────────── */
  .related-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Share block ─────────────────────────────────────────── */
  .share-block {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .sb-count { margin-left: 0; }

  /* ── Footer ─────────────────────────────────────────────── */
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }

  .footer-logo-col {
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }

  /* ── Comment form ───────────────────────────────────────── */
  #commentform .cf-row {
    grid-template-columns: 1fr !important;
  }
}

/* ── 480px — Móvil chico ──────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --site-pad: 14px;
  }

  /* Header */
  .site-logo { font-size: 22px !important; }

  /* Hero */
  .hero-main  { padding: 18px 14px 22px; }
  .hero-title { font-size: 28px !important; }

  /* Article (v2) */
  .art-hero-img { height: 200px !important; }
  .art-title    { font-size: 26px !important; }
  .art-hero-cnt { padding: 0 14px 16px !important; }

  .article-content { font-size: 16px; }

  /* Archive v2 */
  .arc-header { padding: 28px var(--site-pad) 24px; }
  .arc-name   { font-size: 32px !important; }

  /* Search */
  .search-big-input   { font-size: 18px; padding: 12px 14px; }
  .search-big-btn     { padding: 0 16px; }
  .search-no-results  { padding: 50px 0; }

  /* 404 */
  .e404-num     { font-size: 100px !important; letter-spacing: -3px !important; }
  .e404-message { font-size: 24px !important; }

  /* Page */
  .page-content-area  { padding: 32px var(--site-pad) 50px; }
  .page-article-title { font-size: 26px; }

  /* Newsletter widget */
  .nw-title { font-size: 22px; }

  /* Tags */
  .article-tags { gap: 6px; }
  .post-tags    { gap: 6px; }

  /* Ticker */
  .ticker-inner { font-size: 12px; }

  /* Cat tabs */
  .cat-cards {
    grid-template-columns: 1fr !important;
  }

  /* Author box (v2) */
  .author-box {
    flex-direction: column;
    gap: 14px;
  }

  /* Share */
  .share-btns { gap: 6px; }
  .sb-btn     { padding: 8px 12px; font-size: 10px; }
}