/* ============================================================
       VARIABLES
       ============================================================ */

    :root {

      --bg: #0a101d;
      --bg-soft: #101827;

      --paper: #fff1e5;

      --text: #e5e7eb;
      --text-bright: #ffffff;
      --text-muted: #9ca3af;

      --red: #ff4554;
      --yellow: #fbbf24;
      --green: #5f9f68;
      --blue: #38bdf8;

      --border: rgba(255,255,255,0.12);

      --serif: "Lora", Georgia, serif;
      --sans: "Inter", Arial, sans-serif;
      --mono: "Roboto Mono", monospace;

      --content-width: 1120px;
      --text-width: 720px;
    }


    /* ============================================================
       RESET
       ============================================================ */

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--serif);
      line-height: 1.7;
      overflow-x: hidden;
    }

    img {
      max-width: 100%;
      display: block;
    }


    /* ============================================================
       HERO
       ============================================================ */

    .hero {
      min-height: 70vh;
      position: relative;

      display: flex;
      align-items: flex-end;

      padding: 20px 30px 90px;

      background:
        linear-gradient(
          to bottom,
          rgba(10,16,29,0.05),
          rgba(10,16,29,0.98)
        ),
        radial-gradient(
          circle at 70% 35%,
          rgba(95,159,104,0.18),
          transparent 40%
        );

      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;

      background-image:
        linear-gradient(
          rgba(255,255,255,0.025) 1px,
          transparent 1px
        ),
        linear-gradient(
          90deg,
          rgba(255,255,255,0.025) 1px,
          transparent 1px
        );

      background-size: 40px 40px;

      opacity: 0.35;
    }

    .hero-content {
      position: relative;
      z-index: 2;

      width: 100%;
      max-width: var(--content-width);

      margin: auto;
    }

    .kicker {
      font-family: var(--sans);
      font-size: 0.75rem;
      font-weight: 700;

      text-transform: uppercase;
      letter-spacing: 0.13em;

      color: var(--red);

      margin-bottom: 15px;
    }

    .hero h1 {
      max-width: 850px;

      font-family: var(--serif);

      font-size: clamp(3rem, 7vw, 6.8rem);
      line-height: 0.98;

      color: var(--text-bright);

      font-weight: 600;

      letter-spacing: -0.045em;

      margin-bottom: 30px;
    }

    .hero-subtitle {
      max-width: 680px;

      font-size: clamp(1.15rem, 2vw, 1.45rem);

      color: var(--text);

      line-height: 1.5;
    }

    .hero-meta {
      margin-top: 35px;

      font-family: var(--mono);
      font-size: 0.72rem;

      color: var(--text-muted);
    }


    /* ============================================================
       CONTENIDO EDITORIAL
       ============================================================ */

    .article {
      max-width: var(--text-width);

      margin: 0 auto;

      padding: 30px 25px;
    }

    .article p {
      font-size: 1.15rem;

      margin-bottom: 1.6rem;

      color: var(--text);
    }

    .article .lead {
      font-size: 1.4rem;

      color: var(--text-bright);

      line-height: 1.55;
    }

    .article h2 {
      font-size: 2.3rem;

      line-height: 1.15;

      color: var(--text-bright);

      margin: 70px 0 25px;
    }

    .article strong {
      color: white;
    }


    /* ============================================================
       DATOS DESTACADOS
       ============================================================ */

    .stat-strip {
      max-width: var(--content-width);

      margin: 20px auto 30px;

      padding: 0 25px;

      display: grid;

      grid-template-columns:
        repeat(3, 1fr);

      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .stat {
      padding: 35px 25px;

      border-right: 1px solid var(--border);
    }

    .stat:last-child {
      border-right: none;
    }

    .stat-label {
      font-family: var(--sans);

      font-size: 0.72rem;

      text-transform: uppercase;

      letter-spacing: 0.1em;

      color: var(--text-muted);

      margin-bottom: 8px;
    }

    .stat-value {
      font-family: var(--mono);

      font-size: 1.7rem;

      color: var(--text-bright);
    }


    /* ============================================================
       SCROLLYTELLING
       ============================================================ */

    #scrolly {
      position: relative;

      display: flex;

      width: 100%;

      max-width: 1400px;

      margin: 0 auto;

      padding: 40px 25px 100px;
    }

    #scrolly article {
      position: relative;

      width: 42%;

      z-index: 2;
    }

    .step {
      min-height: 85vh;

      display: flex;

      align-items: center;

      padding: 30px 45px 30px 0;

      opacity: 0.25;

      transition:
        opacity 0.5s ease,
        transform 0.5s ease;

      transform: translateY(30px);
    }

    .step.is-active {
      opacity: 1;

      transform: translateY(0);
    }

    .step-inner {
      max-width: 430px;

      background: rgba(10,16,29,0.86);

      padding: 28px;

      border-left: 2px solid rgba(255,255,255,0.15);

      backdrop-filter: blur(5px);
    }

    .step.is-active .step-inner {
      border-left-color: var(--red);
    }

    .step-number {
      font-family: var(--mono);

      font-size: 0.7rem;

      color: var(--red);

      letter-spacing: 0.1em;

      margin-bottom: 10px;
    }

    .step h2 {
      font-family: var(--serif);

      font-size: 2.25rem;

      line-height: 1.12;

      color: white;

      margin-bottom: 18px;
    }

    .step p {
      font-size: 1.05rem;

      color: var(--text);

      line-height: 1.65;
    }

    .step .year {
      color: var(--yellow);

      font-family: var(--mono);

      font-weight: 500;
    }


    /* ============================================================
       IMAGEN STICKY
       ============================================================ */

    #scrolly figure {
      position: sticky;

      top: 8vh;

      width: 58%;

      height: 82vh;

      margin: 0;

      display: flex;

      align-items: center;

      justify-content: center;

      overflow: hidden;

      z-index: 1;
    }

    .image-frame {
      position: relative;

      width: 100%;

      height: 100%;

      display: flex;

      align-items: center;

      justify-content: center;
    }

    #storyImage {
      max-width: 100%;
      max-height: 100%;

      width: auto;
      height: auto;

      object-fit: contain;

      border: 1px solid rgba(255,255,255,0.08);

      box-shadow:
        0 25px 70px rgba(0,0,0,0.45);

      transition:
        opacity 0.35s ease,
        transform 0.35s ease;
    }

    .image-overlay {
      position: absolute;

      left: 20px;
      bottom: 20px;

      padding: 10px 14px;

      background: rgba(10,16,29,0.88);

      border-left: 2px solid var(--red);

      font-family: var(--mono);

      font-size: 0.7rem;

      color: white;

      backdrop-filter: blur(5px);
    }

    /*
      Imágenes estáticas por paso: se usan solo en mobile
      (ver RESPONSIVE). En escritorio se mantiene la imagen
      sticky de más abajo, así que estas quedan ocultas.
    */

    .step-image {
      display: none;
    }


    /* ============================================================
       COMPARACIÓN
       ============================================================ */

    .comparison {
      max-width: var(--content-width);

      margin: 80px auto 20px;

      padding: 0 25px;
    }

    .section-kicker {
      font-family: var(--sans);

      font-size: 0.72rem;

      text-transform: uppercase;

      letter-spacing: 0.12em;

      color: var(--red);

      margin-bottom: 10px;
    }

    .comparison h2 {
      font-size: 3rem;

      line-height: 1.1;

      color: white;

      margin-bottom: 15px;
    }

    .comparison-intro {
      max-width: 700px;

      font-size: 1.15rem;

      color: var(--text-muted);

      margin-bottom: 45px;
    }

    .department-grid {
      display: grid;

      grid-template-columns:
        repeat(2, 1fr);

      gap: 30px;
    }

    .department-card {
      border-top: 1px solid var(--border);

      padding-top: 20px;
    }

    .department-card h3 {
      font-family: var(--sans);

      font-size: 1.25rem;

      color: white;

      margin-bottom: 10px;
    }

    .department-card img {
      width: 100%;

      aspect-ratio: 16 / 10;

      object-fit: contain;

      background: #070c15;

      border: 1px solid var(--border);
    }

    .department-card p {
      font-size: 0.95rem;

      color: var(--text-muted);

      margin-top: 12px;
    }


    /* ============================================================
       EXPLORADOR DINÁMICO
       ============================================================ */

    .explorer {
      max-width: var(--content-width);

      margin: 0 auto;

      padding: 80px 25px 120px;
    }

    .explorer-header {
      border-top: 1px solid var(--border);

      padding-top: 30px;

      margin-bottom: 40px;
    }

    .explorer-header h2 {
      font-size: 3rem;

      line-height: 1.1;

      color: white;

      margin-bottom: 15px;
    }

    .explorer-header p {
      max-width: 700px;

      color: var(--text-muted);

      font-size: 1.1rem;
    }

    .explorer-controls {
      display: flex;

      gap: 15px;

      margin-bottom: 30px;
    }

    .explorer-controls select {
      background: var(--bg-soft);

      color: white;

      border: 1px solid var(--border);

      padding: 12px 15px;

      font-family: var(--sans);

      font-size: 0.85rem;
    }

    .explorer-image {
      width: 100%;

      background: #070c15;

      border: 1px solid var(--border);

      padding: 15px;
    }

    #departmentImage {
      width: 100%;

      max-height: 800px;

      object-fit: contain;

      margin: auto;
    }

    .image-caption {
      padding-top: 15px;

      font-family: var(--mono);

      font-size: 0.7rem;

      color: var(--text-muted);
    }


    /* ============================================================
       MAPA INTERACTIVO DE DEPARTAMENTOS
       ============================================================ */

    .explorer-layout {
      display: grid;

      grid-template-columns: minmax(260px, 380px) 1fr;

      gap: 30px;

      align-items: start;
    }

    .explorer-map {
      background: #070c15;

      border: 1px solid var(--border);

      padding: 15px;
    }

    #departmentMap {
      width: 100%;

      height: auto;

      display: block;
    }

    .dept-path {
      stroke: rgba(255, 255, 255, 0.18);

      stroke-width: 0.6;

      cursor: pointer;

      transition: stroke 0.15s ease, stroke-width 0.15s ease;
    }

    .dept-path:hover {
      stroke: white;

      stroke-width: 1.6;
    }

    .dept-path.is-selected {
      stroke: var(--yellow);

      stroke-width: 2.2;
    }

    .map-legend {
      display: flex;

      align-items: center;

      gap: 10px;

      margin-top: 14px;

      font-family: var(--mono);

      font-size: 0.68rem;

      color: var(--text-muted);
    }

    .map-legend-scale {
      flex: 1;

      height: 8px;

      border-radius: 4px;

      background: linear-gradient(90deg, var(--green), var(--yellow), var(--red));
    }

    .map-hint {
      margin-top: 12px;

      font-family: var(--mono);

      font-size: 0.7rem;

      color: var(--text-muted);

      min-height: 1.4em;
    }


    /* ============================================================
       FUENTE
       ============================================================ */

    .methodology {
      max-width: var(--text-width);

      margin: 0 auto;

      padding: 80px 25px 120px;

      border-top: 1px solid var(--border);
    }

    .methodology h2 {
      color: white;

      font-size: 2rem;

      margin-bottom: 25px;
    }

    .methodology p {
      font-size: 0.95rem;

      color: var(--text-muted);

      margin-bottom: 1rem;
    }

    .methodology a {
      color: var(--blue);
    }


    /* ============================================================
       FOOTER
       ============================================================ */

    footer {
      max-width: var(--content-width);

      margin: auto;

      padding: 40px 25px;

      border-top: 1px solid var(--border);

      color: var(--text-muted);

      font-family: var(--sans);

      font-size: 0.75rem;
    }


    /* ============================================================
       GRÁFICOS DE PÉRDIDA Y EMISIONES
       ============================================================ */

    .department-charts {
      display: grid;

      grid-template-columns: repeat(2, 1fr);

      gap: 30px;

      margin-top: 60px;
    }

    .chart-box {
      border-top: 1px solid var(--border);

      padding-top: 20px;
    }

    .chart-box h3 {
      font-family: var(--sans);

      font-size: 1.25rem;

      color: white;

      margin-bottom: 12px;
    }

    .chart-legend {
      display: flex;

      flex-wrap: wrap;

      gap: 18px;

      margin: 0 0 25px;

      padding: 0;

      list-style: none;

      font-family: var(--sans);

      font-size: 0.75rem;

      color: var(--text-muted);
    }

    .chart-legend li {
      display: flex;

      align-items: center;

      gap: 7px;
    }

    .chart-legend .dot {
      width: 9px;

      height: 9px;

      border-radius: 99px;

      flex-shrink: 0;
    }

    .chart-legend .dot--bar {
      background: var(--red);
    }

    .chart-legend .dot--line {
      background: var(--yellow);
    }

    .chart-block {
      background: #070c15;

      border: 1px solid var(--border);

      padding: 18px;

      margin-bottom: 25px;
    }

    .chart-block:last-child {
      margin-bottom: 0;
    }

    .chart-block h4 {
      font-family: var(--sans);

      font-size: 0.95rem;

      font-weight: 600;

      color: white;
    }

    .chart-block-subtitle {
      margin-top: 5px;

      font-family: var(--mono);

      font-size: 0.68rem;

      letter-spacing: 0.04em;

      color: var(--text-muted);
    }

    .chart-svg {
      width: 100%;

      height: auto;

      display: block;

      margin-top: 12px;
    }

    .chart-bar {
      fill: var(--red);

      transition: opacity 0.2s ease;
    }

    .chart-bar:hover {
      opacity: 0.85;
    }

    .chart-line {
      fill: none;

      stroke: var(--yellow);

      stroke-width: 2;

      stroke-linecap: round;

      stroke-linejoin: round;
    }

    .chart-line-point {
      fill: var(--yellow);
    }

    .chart-grid-line {
      stroke: var(--border);

      stroke-width: 1;
    }

    .chart-axis-line {
      stroke: rgba(255,255,255,0.25);

      stroke-width: 1;
    }

    .chart-axis-label {
      font-family: var(--mono);

      font-size: 9px;

      fill: var(--text-muted);
    }

    .chart-axis-label--line {
      fill: var(--yellow);
    }

    .chart-axis-unit {
      font-family: var(--mono);

      font-size: 9px;

      fill: var(--text-muted);
    }

    .chart-axis-unit--line {
      fill: var(--yellow);
    }

    .chart-error {
      font-family: var(--mono);

      font-size: 0.7rem;

      color: var(--text-muted);

      padding: 12px 0;
    }


    /* ============================================================
       RESPONSIVE
       ============================================================ */

    @media (max-width: 850px) {

      .hero {
        padding-bottom: 10px;
      }

      .stat-strip {
        grid-template-columns: 1fr;
      }

      .stat {
        border-right: none;

        border-bottom: 1px solid var(--border);
      }

      .stat:last-child {
        border-bottom: none;
      }

      #scrolly {
        display: flex;

        flex-direction: column;
      }

      #scrolly article {
        width: 100%;
      }

      #scrolly figure {
        display: none;
      }

      .step {
        display: block;

        min-height: auto;

        padding: 30px 0;

        opacity: 1;

        transform: none;
      }

      .step-inner {
        max-width: 100%;
      }

      .step-image {
        display: block;

        margin-top: 25px;
      }

      .step-image img {
        display: block;

        width: 100%;

        height: auto;

        border: 1px solid rgba(255,255,255,0.08);

        box-shadow: 0 20px 50px rgba(0,0,0,0.4);
      }

      .step-image-caption {
        margin-top: 10px;

        font-family: var(--mono);

        font-size: 0.7rem;

        letter-spacing: 0.05em;

        color: var(--text-muted);
      }

      .department-grid {
        grid-template-columns: 1fr;
      }

      .department-charts {
        grid-template-columns: 1fr;
      }

      .explorer-layout {
        grid-template-columns: 1fr;
      }

      .comparison h2,
      .explorer-header h2 {
        font-size: 2.2rem;
      }
    }


    @media (max-width: 600px) {

      .hero h1 {
        font-size: 2.4rem;
      }

      .hero-subtitle {
        font-size: 0.95rem;
      }

      .article {
        padding-top: 10px;
      }

      .article p {
        font-size: 1rem;
      }

      .article .lead {
        font-size: 1.15rem;
      }

      .article h2 {
        font-size: 1.7rem;
      }

      .step h2 {
        font-size: 1.5rem;
      }

      .step p {
        font-size: 0.95rem;
      }

      .comparison h2,
      .explorer-header h2 {
        font-size: 1.8rem;
      }

      .methodology h2 {
        font-size: 1.6rem;
      }

      .stat-value {
        font-size: 1.3rem;
      }

      #scrolly figure {
        height: 48vh;
      }

      .explorer-controls {
        flex-direction: column;
      }
    }