/* ==========================================================================
   Voz de Colombia - Estilos de paginas de seccion
   (Quienes somos, Podcast, Deportes, Economia, Contacto, Suscripcion, Opinion)
   Bloques <style> originales consolidados desde los HTML estaticos.
   Requiere la hoja principal (style.css) cargada antes que esta.
   ========================================================================== */

/* ------------------------------------------------------------
   Quienes somos
   ------------------------------------------------------------ */
.about-hero {
      background: #123832;
      color: #fff;
      padding: 70px 0 50px;
    }
    .about-hero h1 { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; margin-bottom: 18px; }
    .about-hero p.subhead { font-size: 17px; color: rgba(255,255,255,0.82); max-width: 680px; line-height: 1.7; }
    .about-section { padding: 60px 0; }
    .about-section h2 { font-family: var(--font-serif); font-size: 1.9rem; color: #123832; margin-bottom: 18px; }
    .about-section p { font-size: 16px; color: var(--ink-secondary); line-height: 1.75; margin-bottom: 16px; }
    .values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 32px; }
    .value-card { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid #123832; border-radius: var(--radius-md); padding: 28px 24px; }
    .value-card .icon { font-size: 28px; margin-bottom: 12px; }
    .value-card h3 { font-family: var(--font-serif); font-size: 1.1rem; color: #123832; margin-bottom: 8px; }
    .value-card p { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0; }
    .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; margin-top: 32px; }
    .team-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
    .team-avatar { width: 100%; height: 180px; object-fit: cover; }
    .team-avatar-placeholder { width: 100%; height: 180px; display: flex; align-items: center; justify-content: center; font-size: 56px; font-weight: 800; font-family: var(--font-serif); color: #fff; }
    .team-info { padding: 20px; }
    .team-info h4 { font-family: var(--font-serif); font-size: 1.05rem; color: var(--ink); margin-bottom: 4px; }
    .team-info .role { font-size: 13px; color: #c9a227; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; }
    .team-info p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0; }
    .trn-banner { background: #123832; color: #fff; padding: 50px 0; margin-top: 10px; }
    .trn-banner h2 { font-family: var(--font-serif); font-size: 1.8rem; margin-bottom: 14px; }
    .trn-banner p { font-size: 16px; color: rgba(255,255,255,0.82); max-width: 640px; line-height: 1.7; }
    .trn-banner .trn-highlight { color: #c9a227; font-weight: 800; }
    .divider-line { border: none; border-top: 1px solid var(--border); margin: 0; }

/* ------------------------------------------------------------
   Podcast
   ------------------------------------------------------------ */
.player-hero-box {
      background: #123832;
      color: #ffffff;
      border-radius: var(--radius-lg);
      padding: 36px;
      margin-bottom: 40px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: var(--shadow-lg);
      display: grid;
      grid-template-columns: 260px 1fr;
      gap: 36px;
      align-items: center;
    }

    .player-cover {
      width: 100%;
      aspect-ratio: 1/1;
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
      background: var(--ink);
      position: relative;
    }

    .player-cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .player-controls-main {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .track-badge {
      display: inline-block;
      background: var(--yellow-flag);
      color: var(--ink);
      font-weight: 800;
      font-size: 11px;
      padding: 4px 10px;
      border-radius: 20px;
      text-transform: uppercase;
      letter-spacing: 1px;
      width: fit-content;
    }

    .track-title {
      font-family: var(--font-serif);
      font-size: 28px;
      font-weight: 700;
      line-height: 1.25;
      color: #ffffff;
    }

    .track-desc {
      font-size: 15px;
      color: #cbd5e1;
      line-height: 1.5;
    }

    .audio-progress-bar {
      width: 100%;
      height: 6px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 3px;
      position: relative;
      cursor: pointer;
    }

    .audio-progress-fill {
      width: 35%;
      height: 100%;
      background: var(--yellow-flag);
      border-radius: 3px;
    }

    .player-action-row {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-top: 10px;
    }

    .btn-play-large {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background: var(--yellow-flag);
      color: var(--ink);
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(255, 199, 44, 0.45);
      transition: transform 0.2s;
    }

    .btn-play-large:hover {
      transform: scale(1.06);
    }

    .btn-skip {
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #ffffff;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 13px;
      cursor: pointer;
    }

    .episode-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 50px;
    }

    .episode-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 20px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .episode-card:hover {
      border-color: var(--brand-green);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    @media (max-width: 768px) {
      .player-hero-box {
        grid-template-columns: 1fr;
      }
      .player-cover {
        max-width: 220px;
        margin: 0 auto;
      }
    }

/* ------------------------------------------------------------
   Deportes
   ------------------------------------------------------------ */
.scores-bar { background: #0a1f3d; padding: 12px 0; overflow: hidden; }
    .scores-inner { display: flex; gap: 0; }
    .score-cell { white-space: nowrap; padding: 0 28px; border-right: 1px solid rgba(255,255,255,0.1); color: #fff; font-size: 13px; display: flex; align-items: center; gap: 10px; }
    .score-cell .teams { font-weight: 700; }
    .score-cell .result { background: rgba(201,162,39,0.2); color: #c9a227; font-weight: 800; padding: 2px 8px; border-radius: 4px; font-size: 12px; }
    .score-cell .live-badge { background: #a6402f; color: #fff; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 3px; animation: blink-it 1.5s infinite; }
    @keyframes blink-it { 0%,100%{opacity:1} 50%{opacity:0.5} }

    .sports-hero { background: #123832; color: #fff; padding: 60px 0 44px; }
    .sports-hero h1 { font-family: var(--font-serif); font-size: clamp(2rem,5vw,3rem); font-weight: 700; margin-bottom: 12px; }
    .sports-hero p { font-size: 16px; color: rgba(255,255,255,0.8); max-width: 600px; line-height: 1.7; }

    .sports-main-grid { display: grid; grid-template-columns: 1fr 380px; gap: 40px; margin: 40px 0; }
    @media (max-width: 900px) { .sports-main-grid { grid-template-columns: 1fr; } }

    .sport-lead { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
    .sport-lead-img { position: relative; }
    .sport-lead-img img { width: 100%; height: 320px; object-fit: cover; }
    .sport-lead-img-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.8)); padding: 24px; }
    .sport-lead-img-overlay .cat-badge { background: #c9a227; color: #000; font-size: 11px; font-weight: 800; text-transform: uppercase; padding: 3px 10px; border-radius: 4px; }
    .sport-lead-body { padding: 28px; }
    .sport-lead-body h2 { font-family: var(--font-serif); font-size: 1.6rem; color: var(--ink); line-height: 1.35; margin-bottom: 12px; }
    .sport-lead-body h2 a { color: inherit; }
    .sport-lead-body h2 a:hover { color: #1d3557; }
    .sport-lead-body p { font-size: 15px; color: var(--ink-secondary); line-height: 1.7; margin-bottom: 16px; }
    .sport-lead-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding-top: 16px; }
    .sport-lead-footer span { font-size: 13px; color: var(--muted); }
    .sport-lead-footer a { font-weight: 700; color: #1d3557; }

    .sports-sidebar { display: flex; flex-direction: column; gap: 20px; }
    .sidebar-section-title { font-family: var(--font-serif); font-size: 1.1rem; color: var(--ink); border-bottom: 2px solid #0a1f3d; padding-bottom: 8px; margin-bottom: 14px; }
    .score-card-list { display: flex; flex-direction: column; gap: 10px; }
    .score-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 18px; }
    .score-card .league { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--muted); letter-spacing: 0.8px; margin-bottom: 8px; display: flex; justify-content: space-between; }
    .score-card .match-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .score-card .team-name { font-size: 14px; font-weight: 700; color: var(--ink); flex: 1; }
    .score-card .team-name.right { text-align: right; }
    .score-card .score { font-size: 18px; font-weight: 900; color: #0a1f3d; background: #f0f4f8; padding: 4px 10px; border-radius: 6px; }
    .score-card .live-dot-sm { width: 7px; height: 7px; background: #a6402f; border-radius: 50%; display: inline-block; animation: pulse-ring 1.5s infinite; }
    .score-card .upcoming { font-size: 12px; color: var(--muted); font-weight: 600; background: #f0f4f8; padding: 4px 10px; border-radius: 6px; }

    .standings-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; }
    .standings-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .standings-table th { font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 6px 8px; text-align: center; border-bottom: 1px solid var(--border); }
    .standings-table th:first-child { text-align: left; }
    .standings-table td { padding: 7px 8px; text-align: center; border-bottom: 1px solid var(--border-light); }
    .standings-table td:first-child { text-align: left; font-weight: 600; }
    .standings-table td:nth-child(2) { font-weight: 700; color: #0a1f3d; }
    .standings-table tr:last-child td { border: none; }
    .pos-num { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; margin-right: 6px; }

    .sports-categories { margin-bottom: 50px; }
    .sports-category-title { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
    .sports-category-title h2 { font-family: var(--font-serif); font-size: 1.5rem; color: var(--ink); }
    .sports-category-title a { font-size: 13px; font-weight: 700; color: var(--brand-green); margin-left: auto; }
    .sports-category-divider { flex: 1; height: 2px; background: #0a1f3d; }

    .sports-3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
    @media (max-width: 900px) { .sports-3-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 600px) { .sports-3-grid { grid-template-columns: 1fr; } }
  @media (max-width: 760px) {
    .sports-main-grid { grid-template-columns: 1fr; gap: 28px; }
    .sports-3-grid { grid-template-columns: 1fr; }
  }

/* ------------------------------------------------------------
   Economia
   ------------------------------------------------------------ */
.eco-hero { background: linear-gradient(92deg, rgba(18,56,50,0.96) 0%, rgba(18,56,50,0.90) 46%, rgba(18,56,50,0.64) 100%), url('../images/cafe.jpg') center 45% / cover no-repeat; background-color: #123832; color: #fff; padding: 60px 0 44px; }
    .eco-hero h1 { font-family: var(--font-serif); font-size: clamp(2rem,5vw,3rem); font-weight: 700; margin-bottom: 12px; }
    .eco-hero p { font-size: 16px; color: rgba(255,255,255,0.8); max-width: 600px; line-height: 1.7; }

    /* DASHBOARD DE INDICADORES */
    .indicators-dashboard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; margin: 36px 0; }
    .indicators-dashboard h2 { font-family: var(--font-serif); font-size: 1.3rem; color: var(--ink); margin-bottom: 24px; display: flex; align-items: center; gap: 10px; }
    .indicators-dashboard h2 .live-dot { width: 9px; height: 9px; background: #a6402f; border-radius: 50%; display: inline-block; animation: pulse-ring 1.5s infinite; }
    .indicators-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
    .indicator-tile { background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; position: relative; overflow: hidden; }
    .indicator-tile::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
    .indicator-tile.trm::before { background: #003893; }
    .indicator-tile.euro::before { background: #123832; }
    .indicator-tile.oil::before { background: #a6402f; }
    .indicator-tile.coffee::before { background: #c9a227; }
    .indicator-tile.colcap::before { background: #1b873f; }
    .indicator-tile.ipc::before { background: #726c62; }
    .indicator-label { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--muted); letter-spacing: 0.8px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
    .indicator-value { font-size: 1.6rem; font-weight: 900; color: var(--ink); font-family: var(--font-serif); margin-bottom: 4px; }
    .indicator-change { font-size: 12.5px; font-weight: 700; }
    .indicator-change.up { color: #1b873f; }
    .indicator-change.down { color: #a6402f; }
    .indicator-updated { font-size: 11px; color: var(--muted); margin-top: 6px; }
    .indicator-source { font-size: 10px; color: var(--muted-light); }
    .loading-pulse { animation: loadpulse 1.5s infinite; }
    @keyframes loadpulse { 0%,100%{opacity:0.4} 50%{opacity:1} }

    /* CHARTS placeholder */
    .chart-section { margin: 40px 0; }
    .chart-section h2 { font-family: var(--font-serif); font-size: 1.5rem; color: var(--ink); margin-bottom: 20px; }
    .chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    @media (max-width: 768px) { .chart-grid { grid-template-columns: 1fr; } }
    .chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px; }
    .chart-card h3 { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 16px; display: flex; justify-content: space-between; }
    .chart-card h3 span { font-size: 12px; color: var(--muted); font-weight: 500; }
    .mini-chart { width: 100%; height: 80px; position: relative; }
    .mini-chart svg { width: 100%; height: 100%; }
    .chart-note { font-size: 11px; color: var(--muted); margin-top: 10px; text-align: right; }

    /* NEWS SECTION */
    .eco-news-layout { display: grid; grid-template-columns: 1fr 360px; gap: 40px; margin: 40px 0; }
    @media (max-width: 900px) { .eco-news-layout { grid-template-columns: 1fr; } }
    .eco-section-h2 { font-family: var(--font-serif); font-size: 1.5rem; color: var(--ink); border-bottom: 2px solid #123832; padding-bottom: 10px; margin-bottom: 24px; }
    .eco-article-card { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--border); }
    .eco-article-card:last-child { border-bottom: none; }
    .eco-article-img { width: 110px; height: 78px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
    .eco-article-body h3 { font-family: var(--font-serif); font-size: 0.97rem; color: var(--ink); line-height: 1.4; margin-bottom: 6px; }
    .eco-article-body h3 a { color: inherit; }
    .eco-article-body h3 a:hover { color: #123832; }
    .eco-article-body p { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 6px; }
    .eco-article-footer { font-size: 12px; color: var(--muted); display: flex; gap: 12px; }
    .eco-article-footer .tag { background: rgba(18,56,50,0.08); color: #123832; font-weight: 700; padding: 2px 8px; border-radius: 4px; font-size: 11px; }

    .eco-sidebar-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; margin-bottom: 20px; }
    .eco-sidebar-card h3 { font-size: 14px; font-weight: 800; color: var(--ink); border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 14px; }
    .eco-sidebar-item { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border-light); font-size: 13.5px; }
    .eco-sidebar-item:last-child { border: none; }
    .eco-sidebar-item .name { font-weight: 600; color: var(--ink); }
    .eco-sidebar-item .val { font-weight: 800; color: #0a1f3d; }
    .eco-sidebar-item .chg { font-size: 12px; font-weight: 700; }
    .eco-sidebar-item .chg.up { color: #1b873f; }
    .eco-sidebar-item .chg.down { color: #a6402f; }
  @media (max-width: 760px) {
    .chart-grid { grid-template-columns: 1fr; }
    .eco-news-layout { grid-template-columns: 1fr; gap: 28px; }
  }

/* ------------------------------------------------------------
   Contacto
   ------------------------------------------------------------ */
.contact-hero {
      background: #123832;
      color: #fff; padding: 70px 0 50px;
    }
    .contact-hero h1 { font-family: var(--font-serif); font-size: clamp(2rem,5vw,3rem); font-weight: 700; margin-bottom: 14px; }
    .contact-hero p { font-size: 17px; color: rgba(255,255,255,0.82); max-width: 620px; line-height: 1.7; }
    .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding: 60px 0; align-items: start; }
    @media (max-width: 768px) { .contact-layout { grid-template-columns: 1fr; gap: 40px; } }
    .contact-form-wrap h2 { font-family: var(--font-serif); font-size: 1.6rem; color: #123832; margin-bottom: 24px; }
    .form-group { margin-bottom: 20px; }
    .form-group label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
    .form-group input, .form-group textarea, .form-group select {
      width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-md);
      font-family: var(--font-sans); font-size: 15px; color: var(--ink); background: var(--surface);
      transition: border-color 0.2s; outline: none;
    }
    .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: #123832; }
    .form-group textarea { min-height: 140px; resize: vertical; }
    .btn-submit {
      background: #123832; color: #fff; border: none; padding: 14px 32px;
      border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 15px;
      font-weight: 700; cursor: pointer; transition: background 0.2s, transform 0.15s; width: 100%;
    }
    .btn-submit:hover { background: #1d5049; transform: translateY(-1px); }
    .contact-info-wrap { display: flex; flex-direction: column; gap: 20px; }
    .contact-info-wrap h2 { font-family: var(--font-serif); font-size: 1.6rem; color: #123832; margin-bottom: 8px; }
    .contact-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px; }
    .contact-card h3 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #c9a227; margin-bottom: 8px; }
    .contact-card p { font-size: 15px; color: var(--ink-secondary); margin: 0; line-height: 1.6; }
    .contact-card a { color: #123832; font-weight: 600; }
    .contact-card a:hover { color: #c9a227; }
    .social-links { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
    .social-link { display: inline-flex; align-items: center; gap: 7px; background: #f0f4f8; border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: #123832; transition: all 0.2s; }
    .social-link:hover { background: #123832; color: #fff; border-color: #123832; }
    .map-placeholder { background: #123832; border-radius: var(--radius-md); padding: 50px 30px; text-align: center; color: #fff; }
    .map-placeholder .map-icon { font-size: 48px; margin-bottom: 16px; }
    .map-placeholder h4 { font-family: var(--font-serif); font-size: 1.2rem; margin-bottom: 8px; }
    .map-placeholder p { font-size: 14px; color: rgba(255,255,255,0.75); margin: 0; }
    .success-msg { display: none; background: #d4edda; border: 1px solid #c3e6cb; border-radius: 8px; padding: 16px; margin-top: 16px; color: #155724; font-weight: 600; text-align: center; }
  @media (max-width: 760px) {
    .contact-layout { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
  }

/* ------------------------------------------------------------
   Suscripcion
   ------------------------------------------------------------ */
.pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      margin: 40px 0 60px;
    }

    .pricing-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 36px 28px;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-sm);
      position: relative;
      transition: all 0.25s ease;
    }

    .pricing-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
    }

    .pricing-card.featured {
      border: 2px solid var(--yellow-flag);
      background: #ffffff;
      box-shadow: var(--shadow-md);
    }

    .badge-featured {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--yellow-flag);
      color: var(--ink);
      font-weight: 800;
      font-size: 11px;
      padding: 4px 14px;
      border-radius: 20px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .plan-name {
      font-family: var(--font-serif);
      font-size: 24px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 8px;
    }

    .plan-price {
      font-size: 38px;
      font-weight: 800;
      color: var(--brand-green);
      margin: 16px 0;
    }

    .plan-price span {
      font-size: 15px;
      font-weight: 500;
      color: var(--muted);
    }

    .plan-features {
      list-style: none;
      margin: 20px 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
      font-size: 14.5px;
      color: var(--ink-secondary);
      flex-grow: 1;
    }

    .plan-features li {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .plan-features li::before {
      content: '';
      color: var(--green-up);
      font-weight: 800;
    }

    .btn-plan {
      background: var(--brand-green);
      color: #ffffff;
      font-weight: 700;
      text-align: center;
      padding: 14px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      border: none;
      transition: all 0.2s;
      margin-top: 10px;
    }

    .btn-plan:hover {
      background: var(--brand-green-hover);
    }

    .btn-plan.gold {
      background: var(--yellow-flag);
      color: var(--ink);
    }

    .btn-plan.gold:hover {
      background: #ffd659;
    }

    @media (max-width: 860px) {
      .pricing-grid {
        grid-template-columns: 1fr;
      }
    }

/* ------------------------------------------------------------
   Opinion
   ------------------------------------------------------------ */
/* Opinion page extra styles */
    .opinion-page-hero { background: #123832; color: #fff; padding: 60px 0 44px; }
    .opinion-page-hero h1 { font-family: var(--font-serif); font-size: clamp(2rem,5vw,3rem); font-weight: 700; margin-bottom: 12px; }
    .opinion-page-hero p { font-size: 16px; color: rgba(255,255,255,0.8); max-width: 600px; line-height: 1.7; }

    .editorial-featured { background: var(--surface); border: 1px solid var(--border); border-left: 5px solid #c9a227; border-radius: var(--radius-md); padding: 36px; margin: 40px 0; }
    .editorial-featured .ed-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #c9a227; margin-bottom: 12px; display: block; }
    .editorial-featured h2 { font-family: var(--font-serif); font-size: 1.7rem; color: var(--ink); margin-bottom: 14px; line-height: 1.35; }
    .editorial-featured h2 a { color: inherit; }
    .editorial-featured h2 a:hover { color: #123832; }
    .editorial-featured p { font-size: 15.5px; color: var(--ink-secondary); line-height: 1.75; margin-bottom: 18px; }
    .editorial-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
    .editorial-footer .ed-author { font-size: 13.5px; font-weight: 700; color: var(--ink); }
    .editorial-footer .ed-time { font-size: 12px; color: var(--muted); }
    .editorial-footer a.read-link { color: #123832; font-weight: 700; font-size: 14px; }

    .columnists-section h2 { font-family: var(--font-serif); font-size: 1.8rem; color: var(--ink); margin-bottom: 6px; }
    .columnists-section .section-desc { font-size: 15px; color: var(--muted); margin-bottom: 28px; }
    .columnists-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; margin-bottom: 50px; }

    .columnist-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow 0.2s, transform 0.2s; }
    .columnist-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
    .columnist-card-header { padding: 24px 24px 0; display: flex; align-items: center; gap: 16px; }
    .columnist-avatar-circle { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 1.4rem; font-weight: 800; color: #fff; flex-shrink: 0; }
    .columnist-meta { flex: 1; }
    .columnist-pill { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; padding: 3px 10px; border-radius: 20px; background: rgba(18,56,50,0.1); color: #123832; margin-bottom: 5px; }
    .columnist-name { font-size: 1rem; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
    .columnist-role { font-size: 12.5px; color: var(--muted); }
    .columnist-card-body { padding: 20px 24px 24px; }
    .columnist-quote { font-size: 42px; font-family: var(--font-serif); color: #c9a227; line-height: 0.8; margin-bottom: 8px; }
    .columnist-headline { font-family: var(--font-serif); font-size: 1.05rem; color: var(--ink); line-height: 1.4; margin-bottom: 10px; }
    .columnist-headline a { color: inherit; }
    .columnist-headline a:hover { color: #123832; }
    .columnist-excerpt { font-size: 14px; color: var(--muted); line-height: 1.65; margin-bottom: 16px; }
    .columnist-card-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding-top: 14px; }
    .columnist-card-footer span { font-size: 12.5px; color: var(--muted); }
    .columnist-card-footer a { font-size: 13px; font-weight: 700; color: #123832; }
    .columnist-card-footer a:hover { color: #c9a227; }

    .second-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 50px; }
    @media (max-width: 900px) { .second-row { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 600px) { .second-row { grid-template-columns: 1fr; } .columnists-grid { grid-template-columns: 1fr; } }

    .compact-opinion-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px; border-top: 4px solid; transition: box-shadow 0.2s; }
    .compact-opinion-card:hover { box-shadow: var(--shadow-sm); }
    .compact-opinion-card .compact-pill { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: inherit; margin-bottom: 10px; display: block; }
    .compact-opinion-card h3 { font-family: var(--font-serif); font-size: 0.97rem; color: var(--ink); line-height: 1.4; margin-bottom: 10px; }
    .compact-opinion-card h3 a { color: inherit; }
    .compact-opinion-card h3 a:hover { color: #123832; }
    .compact-opinion-card p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
    .compact-footer { display: flex; justify-content: space-between; align-items: center; }
    .compact-footer .author-compact { display: flex; align-items: center; gap: 8px; }
    .compact-author-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; }
    .compact-footer a { font-size: 12.5px; font-weight: 700; color: #123832; }

    .poll-section { background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: 40px; margin-bottom: 50px; }
    .poll-section h3 { font-family: var(--font-serif); font-size: 1.4rem; margin-bottom: 10px; }
    .poll-section p { font-size: 15px; color: rgba(255,255,255,0.8); margin-bottom: 24px; }
    .poll-options { display: flex; flex-direction: column; gap: 12px; }
    .poll-btn { background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.25); color: #fff; padding: 14px 20px; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all 0.2s; text-align: left; }
    .poll-btn:hover { background: rgba(201,162,39,0.25); border-color: #c9a227; }
    .poll-btn .pct { font-size: 15px; font-weight: 800; color: #c9a227; }
    .poll-votes { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 16px; }

    .principle-box { background: var(--surface); border: 1px solid var(--border); border-left: 5px solid #123832; border-radius: var(--radius-md); padding: 28px; margin-bottom: 50px; }
    .principle-box h3 { font-family: var(--font-serif); font-size: 1.2rem; color: #123832; margin-bottom: 10px; }
    .principle-box p { font-size: 15px; color: var(--ink-secondary); line-height: 1.7; margin: 0; }
  @media (max-width: 760px) {
    .second-row { grid-template-columns: 1fr; }
    .poll-section { padding: 24px 18px; }
  }