/*
 * WhereToEarn — Shared stylesheet (optimized)
 * Contains the global design system and interior-page components only.
 * Home-only presentation rules are isolated in /assets/home.css.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

  :root {
    /* Brand */
    --color-brand-gold: #BD933D;
    --color-brand-charcoal: #232B2D;
    --color-brand-cream: #EBE3D4;
    --color-brand-slate: #6E7475;

    /* Interface */
    --color-bg: #FAF8F3;
    --color-surface: #FFFFFF;
    --color-surface-muted: #F4EFE7;
    --color-border: #E7E1D8;
    --color-border-strong: #D8CDBB;
    --color-text: #232B2D;
    --color-text-muted: #6E7475;
    --color-text-soft: #6B6560;

    /* Semantic */
    --color-positive: #256B48;
    --color-positive-bg: #EAF5EF;
    --color-warning: #8A5613;
    --color-warning-bg: #FFF7E6;
    --color-negative: #B42318;
    --color-negative-bg: #FDECEC;
    --color-info: #2563EB;
    --color-info-bg: #EFF6FF;

    /* Layout */
    --radius-sm: 4px;
    --radius-md: 7px;
    --radius-lg: 10px;
    --border-card: 0.5px solid var(--color-border);

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Type scale */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 28px;
    --text-3xl: 36px;
    --text-4xl: 48px;
    --text-data-xl: clamp(48px, 7vw, 72px);
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: var(--text-base);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
  }

  a { color: inherit; }

  .wrap {
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 var(--space-5) var(--space-8);
  }

  @media (max-width: 640px) {
    .wrap { padding: 0 var(--space-4) var(--space-7); }
  }

  header.site {
    background: #e9dfcf;
    border-bottom: var(--border-card);
  }

  header.site .wrap-header {
    max-width: 1220px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
  }

  .logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
    text-decoration: none;
    color: var(--color-text);
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .logo-img {
    height: 34px;
    width: auto;
    display: block;
    flex: 0 0 auto;
  }

  .logo-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-size: var(--text-lg);
    line-height: 1;
  }

  .logo .where,
  .logo .earn { color: #7D5C21; }
  .logo .to { color: var(--color-brand-charcoal); }

  .crumb {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  .crumb a {
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 1px dotted var(--color-border-strong);
  }

  .crumb a:hover { color: var(--color-brand-charcoal); border-bottom-color: var(--color-brand-gold); }

  .eyebrow {
    display: block;
    margin-bottom: var(--space-3);
    color: var(--color-text-soft);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  h1,
  h2,
  h3 {
    color: var(--color-text);
    letter-spacing: -0.025em;
  }

  h1 {
    max-width: 780px;
    margin: 0 0 var(--space-5);
    font-size: clamp(34px, 5vw, var(--text-4xl));
    line-height: 1.08;
    font-weight: 700;
  }

  h1 strong { font-weight: 700; }

  .anchor-number {
    color: var(--color-brand-charcoal);
    font-size: var(--text-data-xl);
    line-height: 0.96;
    letter-spacing: -0.04em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .anchor-unit {
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    margin-left: var(--space-2);
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-5);
  }

  @media (max-width: 820px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }

  .card {
    background: var(--color-surface);
    border: var(--border-card);
    border-radius: var(--radius-md);
    padding: var(--space-5);
  }

  .card .k,
  .stat-inline .k,
  .panel-contexto .item .k {
    margin-bottom: var(--space-2);
    color: var(--color-text-soft);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
  }

  .card .v {
    color: var(--color-text);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.2;
  }

  .card .note {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }

  .card.link-card {
    display: block;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }

  .card.link-card:hover {
    background: var(--color-surface-muted);
    border-color: var(--color-border-strong);
  }

  .card.link-card .v { font-size: var(--text-lg); }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.35;
  }

  .badge.positive { background: var(--color-positive-bg); color: var(--color-positive); }
  .badge.neutral { background: var(--color-surface-muted); color: var(--color-text-muted); }
  .badge.warning { background: var(--color-warning-bg); color: var(--color-warning); }
  .badge.brand { background: var(--color-brand-cream); color: var(--color-brand-charcoal); }

  .section-title {
    margin: var(--space-7) 0 var(--space-4);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.25;
  }

  .button-primary,
  .button-secondary,
  .share-btn {
    min-height: 44px;
    border-radius: var(--radius-md);
    font-family: Inter, system-ui, sans-serif;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }

  .button-primary {
    padding: var(--space-3) var(--space-5);
    background: var(--color-brand-charcoal);
    color: #FFFFFF;
    border: 1px solid var(--color-brand-charcoal);
  }

  .button-primary:hover { background: #111718; }

  .button-secondary,
  .share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-5);
    background: var(--color-surface);
    color: var(--color-brand-charcoal);
    border: 1px solid var(--color-border-strong);
    text-decoration: none;
  }

  .button-secondary:hover,
  .share-btn:hover {
    background: var(--color-surface-muted);
    border-color: var(--color-brand-gold);
  }

  /* Shared search component used by interior templates.
     The floating home variant now lives exclusively in home.css. */
  .search-box {
    background: var(--color-surface);
    border: var(--border-card);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin: var(--space-6) 0;
  }

  .search-box .row {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
  }

  .search-box select {
    flex: 1;
    min-width: 210px;
    min-height: 44px;
    padding: var(--space-3) 40px var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: 500 var(--text-sm)/1.2 Inter, system-ui, sans-serif;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232B2D' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
  }

  .search-box select:hover { border-color: var(--color-brand-gold); }

  .trust-strip {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin: 0 0 var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 500;
  }

  .trust-strip span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 var(--space-3);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
  }

  table.listado {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    margin-bottom: var(--space-5);
    background: var(--color-surface);
    border: var(--border-card);
    border-radius: var(--radius-md);
  }

  table.listado th,
  table.listado td {
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-card);
    text-align: left;
    font-size: var(--text-sm);
    vertical-align: top;
  }

  table.listado th {
    background: var(--color-surface-muted);
    color: var(--color-text-soft);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
  }

  table.listado tr:last-child td { border-bottom: none; }
  table.listado td.num { font-variant-numeric: tabular-nums; }
  table.listado a { color: var(--color-brand-charcoal); text-decoration: none; font-weight: 600; }
  table.listado a:hover { color: var(--color-brand-gold); }

  @media (max-width: 760px) {
    table.listado { display: block; overflow-x: auto; white-space: nowrap; }
  }

  .tabs {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: nowrap;
    margin: var(--space-4) 0 var(--space-5);
    padding: 4px;
    background: var(--color-surface);
    border: var(--border-card);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  .tab {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0.56rem 0.84rem;
    background: transparent;
    border: none;
    border-radius: 5px;
    color: var(--color-text-muted);
    font: 700 0.78rem/1 Inter, system-ui, sans-serif;
    letter-spacing: -0.005em;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
  }

  .tab:hover,
  .tab.active {
    color: var(--color-brand-charcoal);
    background: var(--color-surface-muted);
  }

  .tab.active {
    box-shadow: inset 0 -2px 0 var(--color-brand-gold);
  }

  .tab-panel { display: none; }
  /* El contenido de los paneles sigue presente en el DOM/HTML fuente
     (requisito SEO de la guia de marca) -- display:none solo controla
     la visualizacion; el panel activo se muestra via .active. */
  .tab-panel.active { display: block; }

  @media (max-width: 760px) {
    .tabs { margin-top: var(--space-3); }
    .tab { padding-inline: 0.72rem; font-size: 0.75rem; }
  }

  .crosslinks {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-7);
    flex-wrap: wrap;
  }

  .share-row {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
    margin: var(--space-5) 0 0;
  }

  .narrative {
    max-width: 760px;
    margin: var(--space-5) 0;
    color: var(--color-text-muted);
    font-size: var(--text-base);
    line-height: 1.75;
  }

  .ticker {
    max-width: 720px;
    height: 24px;
    margin: var(--space-2) 0 0;
    overflow: hidden;
    position: relative;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
  }

  .ticker-item { position: absolute; inset: 0 auto auto 0; opacity: 0; transition: opacity 0.35s ease; }
  .ticker-item.visible { opacity: 1; }

  .stat-number { font-variant-numeric: tabular-nums; }

  .stat-inline-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-6);
  }

  @media (max-width: 820px) { .stat-inline-row { grid-template-columns: 1fr; } }

  .stat-inline {
    padding: var(--space-5);
    background: var(--color-surface);
    border: var(--border-card);
    border-radius: var(--radius-md);
  }

  .stat-inline .v {
    color: var(--color-text);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.2;
  }


  .nucleus-page {
    padding-top: var(--space-6);
  }

  .top-nav-stack {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.62fr);
    gap: var(--space-5);
    align-items: start;
    margin-bottom: var(--space-6);
  }

  @media (max-width: 980px) { .top-nav-stack { grid-template-columns: 1fr; } }

  .toc-card {
    background: var(--color-surface);
    border: var(--border-card);
    border-radius: var(--radius-md);
    padding: var(--space-5);
  }

  .toc-card .toc-title {
    margin: 0 0 var(--space-3);
    color: var(--color-text-soft);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
  }

  .toc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-4);
  }

  .toc-grid a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-brand-charcoal);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.35;
  }

  .toc-grid a::before {
    content: "";
    width: 6px;
    height: 6px;
    border: 1px solid var(--color-brand-gold);
    background: var(--color-surface-muted);
  }

  .toc-grid a:hover { color: var(--color-brand-gold); }

  .toc-grid--stacked { grid-template-columns: 1fr; }

  .section-panel {
    margin: var(--space-6) 0;
    padding: var(--space-6);
    background: var(--color-surface);
    border: var(--border-card);
    border-radius: var(--radius-lg);
  }

  .section-panel.flush { padding: 0; overflow: hidden; }


  .faq-list { display: flex; flex-direction: column; gap: var(--space-3); }
  .faq-item {
    border: var(--border-card);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
  }
  .faq-item summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--color-brand-charcoal);
    list-style: none;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::before { content: "+ "; color: var(--color-brand-gold); font-weight: 700; }
  .faq-item[open] summary::before { content: "− "; }
  .faq-item p { margin: var(--space-3) 0 0; color: var(--color-text-muted); }

  .section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
  }

  .section-header h2 {
    margin: 0;
    font-size: var(--text-2xl);
    line-height: 1.15;
  }

  .section-header p {
    max-width: 560px;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.65;
  }

  @media (max-width: 760px) {
    .section-header { display: block; }
    .section-header p { margin-top: var(--space-3); }
  }

  .metric-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
  }

  @media (max-width: 1080px) { .metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px) { .metric-row { grid-template-columns: 1fr; } }

  .location-section {
    margin: var(--space-6) 0;
    background: var(--color-surface);
    border: var(--border-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .location-content {
    display: grid;
    grid-template-columns: minmax(260px, 0.7fr) minmax(320px, 1fr) minmax(220px, 0.55fr);
    gap: var(--space-5);
    align-items: center;
    padding: var(--space-6);
  }

  @media (max-width: 980px) { .location-content { grid-template-columns: 1fr; } }

  .location-copy h2 {
    margin: 0 0 var(--space-3);
    font-size: var(--text-2xl);
    line-height: 1.15;
  }

  .location-copy p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.7;
  }

  .location-map {
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    border: var(--border-card);
    border-radius: var(--radius-md);
    padding: var(--space-5);
  }

  .location-map svg { width: 100%; max-width: 520px; height: auto; }

  .location-facts {
    display: grid;
    gap: var(--space-3);
  }

  .fact-card {
    padding: var(--space-4);
    background: var(--color-bg);
    border: var(--border-card);
    border-radius: var(--radius-md);
  }

  .fact-card .k {
    margin-bottom: var(--space-1);
    color: var(--color-text-soft);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
  }

  .fact-card .v {
    color: var(--color-brand-charcoal);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.2;
  }

  footer.disclaimer {
    max-width: 1220px;
    margin: var(--space-8) auto 0;
    padding: var(--space-5);
    border-top: var(--border-card);
    color: var(--color-text-soft);
    font-size: var(--text-xs);
  }

  /* --- Footer de 3 columnas, banda crema a juego con el footer de la home --- */
  .site-footer {
    background: #e9dfcf; color: #1f292b;
    border-top: 1px solid rgba(31, 41, 43, 0.12);
    margin-top: var(--space-8);
  }
  .footer-grid {
    max-width: 1220px; margin: 0 auto;
    display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-6);
    padding: var(--space-8) var(--space-6) var(--space-6);
  }
  @media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }
  .footer-brand .logo { margin-bottom: var(--space-3); }
  .footer-brand .logo img { height: 28px; }
  .footer-brand .logo .where, .footer-brand .logo .earn { color: var(--color-brand-gold); }
  .footer-brand .logo .to { color: #1f292b; }
  .footer-tagline { font-size: var(--text-sm); color: #5b6467; line-height: 1.6; max-width: 320px; margin: 0; }
  .footer-heading {
    font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em;
    color: #5b6467; font-weight: 600; margin: 0 0 var(--space-3);
  }
  .footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .footer-links a { color: #1f292b; text-decoration: none; font-size: var(--text-sm); }
  .footer-links a:hover { color: var(--color-brand-gold); }
  .footer-bottom {
    max-width: 1220px; margin: 0 auto;
    border-top: 1px solid rgba(31, 41, 43, 0.12);
    padding: var(--space-4) var(--space-6) var(--space-6);
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3);
  }
  .footer-bottom p { margin: 0; font-size: var(--text-xs); color: #5b6467; }
  .footer-bottom .footer-disclaimer-text { max-width: 620px; }

  :focus-visible {
    outline: 3px solid rgba(189, 147, 61, 0.35);
    outline-offset: 3px;
  }

  /* --- Respeto a prefers-reduced-motion (auditoría de accesibilidad) --- */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* Hero oscuro recuperado: mapa real de líneas en tono acre/dorado. */
  .hero-band {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    padding: var(--space-7) 0 var(--space-6);
    background: var(--color-brand-charcoal);
    border-bottom: 1px solid rgba(189, 147, 61, 0.28);
    color: #FFFFFF;
  }

  .hero-band .wrap { position: relative; z-index: 1; padding-bottom: 0; }
  .hero-band .contenido-hero { position: relative; z-index: 1; }
  .hero-band .mapa-fondo {
    position: absolute;
    inset: -18% -8% auto 32%;
    height: 118%;
    z-index: 0;
    pointer-events: none;
    color: var(--color-brand-gold);
    opacity: 0.42;
    mix-blend-mode: screen;
  }

  .hero-band .eyebrow { color: rgba(235, 227, 212, 0.72); }
  .hero-band h1 { color: #FFFFFF; }
  .hero-band h1 strong { color: var(--color-brand-cream); }
  .hero-band .anchor-number { color: var(--color-brand-gold); }
  .hero-band .anchor-unit { color: rgba(235, 227, 212, 0.78); }
  .hero-band .narrative { color: rgba(235, 227, 212, 0.84); }
  .hero-band .ticker { color: rgba(235, 227, 212, 0.78); }

  .hero-band .badge {
    border: 1px solid rgba(235, 227, 212, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
  }

  .hero-band .badge.positive { color: #DDF4E7; background: rgba(47, 125, 87, 0.22); }
  .hero-band .badge.warning { color: #FFE8B8; background: rgba(183, 121, 31, 0.22); }
  .hero-band .badge.brand { color: var(--color-brand-cream); background: rgba(189, 147, 61, 0.18); }

  .hero-band .share-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    border-color: rgba(235, 227, 212, 0.22);
  }

  .hero-band .share-btn:hover {
    background: rgba(189, 147, 61, 0.18);
    border-color: rgba(189, 147, 61, 0.75);
  }

  .layout-2col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--space-6);
    align-items: start;
  }

  @media (max-width: 1040px) { .layout-2col { grid-template-columns: 1fr; } }

  .sidebar-sticky {
    position: sticky;
    top: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  @media (max-width: 1040px) { .sidebar-sticky { position: static; } }
  .sidebar-sticky .mapa-mini svg { width: 100%; max-width: 100%; height: auto; }

  .foto-ciudad-wrap {
    width: 100%;
    min-height: 160px;
    margin-bottom: var(--space-5);
    overflow: hidden;
    border: var(--border-card);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .foto-ciudad-wrap .degradado-fallback {
    min-height: 160px;
    display: flex;
    align-items: flex-end;
    padding: var(--space-5);
    background: var(--color-brand-cream) !important;
  }

  .foto-ciudad-wrap .degradado-fallback .etiqueta {
    color: var(--color-brand-charcoal);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
  }

  .foto-ciudad-wrap img { display: none; }

  .panel-contexto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    margin-bottom: var(--space-6);
    background: var(--color-surface);
    border: var(--border-card);
    border-radius: var(--radius-md);
  }

  @media (max-width: 760px) { .panel-contexto { grid-template-columns: 1fr !important; } }

  .panel-contexto .item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border-right: var(--border-card);
    border-bottom: var(--border-card);
  }

  .panel-contexto .item:nth-child(3n),
  .panel-contexto .item:last-child { border-right: none; }
  .panel-contexto .item:nth-last-child(-n+3) { border-bottom: none; }
  @media (max-width: 760px) { .panel-contexto .item { border-right: none; } }

  .panel-contexto .item .icono {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-brand-gold);
  }

  .panel-contexto .item .v {
    color: var(--color-text);
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }

  .panel-contexto .item .comparacion {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
  }

  .panel-contexto .item .comparacion.arriba { color: var(--color-negative); }
  .panel-contexto .item .comparacion.abajo { color: var(--color-positive); }


  /* Editorial SEO blocks: flat, modular and consistent with the brand guide. */
  .seo-decision-block,
  .hub-editorial-block,
  .data-story-block,
  .alternatives-block,
  .methodology-note,
  .programmatic-copy-block {
    margin: var(--space-6) 0;
    padding: var(--space-6);
    background: var(--color-surface);
    border: var(--border-card);
    border-radius: var(--radius-lg);
  }

  .programmatic-copy-block.compact { padding: var(--space-5); }

  .decision-header,
  .programmatic-head { max-width: 820px; margin-bottom: var(--space-5); }

  .decision-header h2,
  .data-story-block h2,
  .alternatives-block h2,
  .programmatic-head h2 {
    margin: 0 0 var(--space-3);
    color: var(--color-brand-charcoal);
    font-size: var(--text-2xl);
    line-height: 1.18;
    font-weight: 700;
  }

  .decision-header p,
  .data-story-block p,
  .alternatives-block p,
  .methodology-note p,
  .programmatic-head p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.75;
  }

  .data-story-block p + p { margin-top: var(--space-4); }

  .decision-grid,
  .decision-grid.compact,
  .programmatic-grid,
  .programmatic-grid.three {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
  }

  .insight-card,
  .programmatic-card {
    min-height: 0;
    padding: var(--space-5);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .insight-card.tone-positive,
  .insight-card.tone-warning,
  .insight-card.tone-neutral { background: var(--color-bg); }

  .insight-label {
    margin-bottom: var(--space-2);
    color: var(--color-text-soft);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
  }

  .insight-value {
    margin-bottom: var(--space-2);
    color: var(--color-text);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.15;
  }

  .insight-card p,
  .programmatic-card p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
  }

  .programmatic-card strong {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-brand-charcoal);
    font-size: var(--text-sm);
  }

  .alternative-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-5);
  }

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

  .alternative-columns h3 {
    margin: 0 0 var(--space-3);
    color: var(--color-brand-charcoal);
    font-size: var(--text-base);
  }

  .compare-pill-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .compare-pill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: var(--text-sm);
    text-decoration: none;
  }

  .compare-pill:hover { border-color: var(--color-brand-gold); background: var(--color-surface-muted); }
  .compare-pill strong { color: var(--color-brand-charcoal); font-variant-numeric: tabular-nums; }

  .methodology-note {
    background: var(--color-surface-muted);
    border-style: dashed;
  }

  .methodology-note strong {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-brand-charcoal);
    font-size: var(--text-sm);
  }

  .answer-brief {
    margin-top: var(--space-5);
    padding: var(--space-5);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .answer-brief.compact { padding: var(--space-4); }

  .answer-brief h3 {
    margin: 0 0 var(--space-3);
    color: var(--color-brand-charcoal);
    font-size: var(--text-base);
  }

  .answer-brief ul {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.7;
  }

  .answer-brief li + li { margin-top: 4px; }

  .answer-brief .brief-note,
  .answer-brief p {
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.65;
  }

  .bottom-line {
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--color-brand-cream);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-brand-charcoal);
    font-size: var(--text-sm);
    line-height: 1.7;
  }

  .keyword-evidence,
  .kw-chip-list,
  .kw-chip { display: none; }

  .community-context-block {
    margin: var(--space-6) 0;
    padding: var(--space-6);
    background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(244,239,231,0.72));
    border: var(--border-card);
    border-radius: var(--radius-lg);
  }

  .community-context-block.compact { padding: var(--space-5); }

  .community-context-head {
    max-width: 840px;
    margin-bottom: var(--space-5);
  }

  .community-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--color-positive-bg);
    border: 1px solid rgba(47,125,87,0.16);
    border-radius: 999px;
    color: var(--color-positive);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
  }

  .community-context-head h2 {
    margin: 0 0 var(--space-3);
    color: var(--color-brand-charcoal);
    font-size: var(--text-2xl);
    line-height: 1.18;
  }

  .community-context-head p,
  .community-disclaimer {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.72;
  }

  .community-context-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-4);
  }

  .community-signal-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: rgba(255,255,255,0.88);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .community-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .community-scenario {
    color: var(--color-brand-charcoal);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .community-trust {
    color: var(--color-text-soft);
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
  }

  .community-signal-card p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.68;
  }

  .community-number-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin-top: auto;
  }

  .community-number-strip span {
    padding: var(--space-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
  }

  .community-number-strip b {
    display: block;
    color: var(--color-brand-charcoal);
    font-size: var(--text-base);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }

  .community-number-strip small {
    display: block;
    margin-top: 4px;
    color: var(--color-text-soft);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.045em;
    line-height: 1.15;
    text-transform: uppercase;
  }

  .community-entity-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .community-entity-list span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 700;
  }

  .community-disclaimer {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px dashed var(--color-border-strong);
    font-size: var(--text-xs);
  }

  @media (max-width: 560px) {
    .community-number-strip { grid-template-columns: 1fr; }
  }

  /* Phase A/B — source transparency and community badges. */
  .below-city-insights {
    margin-top: var(--space-7);
  }

  .trust-strip i,
  .eyebrow i,
  .research-footnote i,
  .community-kicker i,
  .community-disclaimer i {
    margin-right: 7px;
    color: var(--color-brand-gold);
  }

  .research-overview-block {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,239,231,0.64));
  }

  .research-overview-block::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--color-brand-gold);
    opacity: 0.75;
  }

  .research-head { max-width: 920px; }

  .research-metric-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    margin: var(--space-5) 0;
  }

  .research-metric-row span {
    display: block;
    padding: var(--space-4) var(--space-5);
    border-right: 1px solid var(--color-border);
  }

  .research-metric-row span:last-child { border-right: 0; }

  .research-metric-row strong {
    display: block;
    color: var(--color-brand-charcoal);
    font-size: var(--text-xl);
    line-height: 1.1;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  .research-metric-row small {
    display: block;
    margin-top: 6px;
    color: var(--color-text-soft);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .research-path-grid .programmatic-card {
    border-radius: 0;
    background: rgba(255,255,255,0.82);
  }

  .research-path-grid .programmatic-card > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: var(--space-3);
    color: var(--color-brand-gold);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
  }

  .research-footnote {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: var(--space-5) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.65;
  }

  .data-transparency-block {
    margin: var(--space-6) 0;
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: 0;
  }

  .source-section-head {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
    margin-bottom: var(--space-5);
  }

  .source-section-head h2 {
    margin: 0 0 var(--space-2);
    color: var(--color-brand-charcoal);
    font-size: var(--text-2xl);
    line-height: 1.2;
  }

  .source-section-head p {
    max-width: 760px;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.7;
  }

  .source-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--color-border-strong);
  }

  .source-card {
    position: relative;
    min-height: 142px;
    padding: var(--space-5);
    background: var(--color-bg);
    border-right: 1px solid var(--color-border);
    border-radius: 0;
  }

  .source-card:last-child { border-right: 0; }

  .source-card .source-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: var(--space-3);
    color: var(--color-brand-gold);
    background: rgba(189,147,61,0.10);
    border: 1px solid rgba(189,147,61,0.22);
  }

  .source-card--good .source-icon { color: var(--color-positive); background: var(--color-positive-bg); border-color: rgba(47,125,87,0.2); }
  .source-card--neutral .source-icon { color: var(--color-text-muted); background: var(--color-surface); }

  .source-label {
    display: block;
    color: var(--color-text-soft);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .source-card strong {
    display: block;
    margin-top: 6px;
    color: var(--color-brand-charcoal);
    font-size: var(--text-base);
    line-height: 1.3;
    font-weight: 800;
  }

  .source-card small {
    display: block;
    margin-top: 6px;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.35;
  }

  .source-chip-row,
  .coverage-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .source-chip-row { margin-top: var(--space-4); }

  .source-chip,
  .coverage-chip-row span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 0 var(--space-3);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
  }

  .source-chip i { color: var(--color-brand-gold); }
  .source-chip--good i { color: var(--color-positive); }
  .source-chip--warn i { color: var(--color-warning); }

  .source-coverage {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
  }

  .source-coverage-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-2);
    color: var(--color-brand-charcoal);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
  }

  .source-coverage-label i { color: var(--color-brand-gold); }

  .source-notes {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
  }

  .source-note-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.55;
  }

  .source-note-row + .source-note-row { margin-top: var(--space-2); }
  .source-note-row i { margin-top: 3px; color: var(--color-warning); }
  .source-note-row--muted i { color: var(--color-positive); }

  .community-context-block {
    border-radius: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
  }

  .community-context-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .community-kicker {
    width: fit-content;
    border-radius: 0;
    background: var(--color-positive-bg);
  }

  .community-badge-rack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
  }

  .community-badge {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 68px;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 0;
  }

  .community-badge > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
  }

  .community-badge--good > i { color: var(--color-positive); background: var(--color-positive-bg); border-color: rgba(47,125,87,0.2); }
  .community-badge--warn > i { color: var(--color-warning); background: var(--color-warning-bg); border-color: rgba(183,121,31,0.2); }
  .community-badge--info > i { color: var(--color-info); background: var(--color-info-bg); border-color: rgba(37,99,235,0.18); }

  .community-badge strong,
  .community-badge small {
    display: block;
  }

  .community-badge strong {
    color: var(--color-brand-charcoal);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .community-badge small {
    margin-top: 3px;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.25;
  }

  .community-context-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .community-signal-card {
    border-radius: 0;
    background: var(--color-bg);
  }

  .community-signal-card--good { border-top: 3px solid var(--color-positive); }
  .community-signal-card--warn { border-top: 3px solid var(--color-warning); }
  .community-signal-card--info { border-top: 3px solid var(--color-info); }
  .community-signal-card--neutral { border-top: 3px solid var(--color-brand-gold); }

  .community-card-top {
    justify-content: flex-start;
  }

  .community-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 2px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-brand-gold);
  }

  .community-icon--good { color: var(--color-positive); background: var(--color-positive-bg); }
  .community-icon--warn { color: var(--color-warning); background: var(--color-warning-bg); }
  .community-icon--info { color: var(--color-info); background: var(--color-info-bg); }

  .community-trust {
    margin-left: auto;
    border: 1px solid var(--color-border);
    padding: 3px 7px;
    background: var(--color-surface);
  }

  .community-number-strip span,
  .community-entity-list span {
    border-radius: 0;
  }

  .community-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  @media (max-width: 900px) {
    .source-section-head { grid-template-columns: 1fr; }
    .source-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .source-card:nth-child(2) { border-right: 0; }
    .source-card:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); }
    .research-metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .research-metric-row span:nth-child(2) { border-right: 0; }
    .research-metric-row span:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); }
  }

  @media (max-width: 560px) {
    .source-card-grid,
    .research-metric-row { grid-template-columns: 1fr; }
    .source-card,
    .research-metric-row span { border-right: 0; border-bottom: 1px solid var(--color-border); }
    .source-card:last-child,
    .research-metric-row span:last-child { border-bottom: 0; }
  }


/* v2.2.0 — shared accessibility and rendering hardening */
img { max-width: 100%; }
button, input, select, textarea { font: inherit; }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(189, 147, 61, 0.42);
  outline-offset: 3px;
}
[id] { scroll-margin-top: 96px; }
::selection { background: rgba(189, 147, 61, 0.28); color: #11191b; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}