@media (max-width: 1199px) {
  .ambiental-residuos-principles-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ambiental-residuos-principle-card,
  .ambiental-residuos-principle-card:nth-child(5),
  .ambiental-residuos-principle-card:nth-child(6),
  .ambiental-residuos-principle-card:nth-child(7) {
    grid-column: auto;
  }
}

@media (max-width: 1180px) {
  .site-header {
    justify-content: flex-end;
  }

  .primary-nav {
    margin-left: 130px;
  }

  .nav-item {
    align-items: stretch;
  }

  .primary-nav a,
  .nav-parent {
    min-width: auto;
    max-width: 126px;
    padding-inline: 10px;
    font-size: .78rem;
  }

  .nav-dropdown {
    min-width: 230px;
  }

  .hero-copy {
    padding-bottom: 30px;
  }

  .hero-copy h1 span:last-child {
    top: calc(100% + .48em);
  }


  .value-copy h1,
  .gobernanza-hero-copy h1,
  .climate-hero-copy h1,
  .ambiental-hero-copy h1 {
    font-size: clamp(2.45rem, 3.7vw, 4.25rem);
  }

  .ambiental-gestion-row {
    --node-size: clamp(118px, 14vw, 148px);
    --node-overlap: 10px;
  }

  .ambiental-gestion-node {
    padding: 12px;
  }

  .ambiental-gestion-node span {
    padding: 0 10px;
    font-size: clamp(.62rem, .9vw, .76rem);
  }

  .ambiental-gestion-node::after {
    right: -14px;
    width: 15px;
    height: 16px;
  }

  .ambiental-agua-layout {
    gap: 24px;
  }

  .ambiental-agua-policy {
    width: clamp(96px, 11vw, 120px);
    margin-left: 0;
    font-size: .68rem;
  }

  .ambiental-agua-diagram {
    --agua-size: min(100%, 380px);
    --agua-sphere-size: clamp(112px, 20vw, 140px);
  }

  .climate-hero {
    --entry-stage-side: clamp(210px, 22vw, 360px);
  }

  .climate-hero-wash {
    width: clamp(460px, calc(36vw + 90px), 620px);
    min-height: clamp(400px, 54vh, 540px);
  }

  .climate-orbit {
    left: clamp(460px, 44vw, 600px);
    opacity: .5;
  }

  .climate-hero-copy {
    width: clamp(360px, 38vw, 520px);
  }

  .climate-block-grid {
    gap: 12px;
  }

  .climate-donut-card .distribution-chart {
    width: min(148px, 100%);
  }

  .ethics-bar-chart.climate-gei-emissions-chart {
    width: 96%;
    max-width: 88%;
    gap: 6px 10px;
  }

  .climate-gei-hbar-body {
    grid-template-columns: minmax(58px, 74px) minmax(0, 1fr);
    gap: 12px 10px;
  }

  .climate-gei-hbar-panel {
    width: 100%;
    max-width: none;
  }

}

@media (max-width: 920px) {
  :root {
    --site-header-height: 66px;
  }

  /* Header fijo al viewport: no desaparece cuando body se bloquea con top negativo */
  body {
    padding-top: var(--site-header-height);
  }

  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    /* Evita que fixed del menú quede atrapado en el stacking/containing block del header */
    transform: none;
    filter: none;
    perspective: none;
    contain: none;
    animation: none;
    backdrop-filter: none;
    background: #fff;
    z-index: 10001;
  }

  body.menu-open .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    transform: none;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .brand {
    position: static;
    margin-left: 18px;
  }

  .menu-toggle {
    display: block;
    position: relative;
    z-index: 10002;
  }

  /* Panel anclado al viewport; overflow solo en .open (único scroll) */
  .primary-nav {
    position: fixed;
    inset-inline: 0;
    top: var(--site-header-height, 66px);
    bottom: 0;
    z-index: 10000;
    display: none;
    width: 100%;
    max-width: none;
    height: calc(100svh - var(--site-header-height, 66px));
    height: calc(100dvh - var(--site-header-height, 66px));
    min-height: 0;
    max-height: calc(100svh - var(--site-header-height, 66px));
    max-height: calc(100dvh - var(--site-header-height, 66px));
    margin: 0;
    padding: 12px 24px calc(24px + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    background: #fff;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .08);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: none;
  }

  .primary-nav.open {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-content: start;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--orange) transparent;
  }

  .primary-nav.open::-webkit-scrollbar {
    width: 6px;
  }

  .primary-nav.open::-webkit-scrollbar-track {
    background: transparent;
  }

  .primary-nav.open::-webkit-scrollbar-thumb {
    background: var(--orange);
    border-radius: 999px;
  }

  .nav-item {
    display: grid;
    align-items: stretch;
  }

  .primary-nav a,
  .nav-parent {
    justify-content: flex-start;
    max-width: none;
    min-height: 48px;
    padding: 14px 18px;
    text-align: left;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .76);
  }

  .primary-nav a.active,
  .nav-item.active {
    grid-column: 1 / -1;
  }

  .primary-nav a.active,
  .nav-item.active > .nav-parent {
    border-color: transparent;
  }

  .nav-parent::before {
    margin-left: auto;
  }

  .nav-dropdown {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-inline: 0;
    inset-inline: auto;
    padding: 6px;
    border: 1px solid var(--line);
    border-top: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    background: rgba(255, 255, 255, .54);
  }

  /* Ningún estado puede desplazar ni redimensionar el submenú acordeón */
  .nav-item:hover > .nav-dropdown,
  .nav-item:focus-within > .nav-dropdown,
  .nav-item.active > .nav-dropdown,
  .nav-dropdown:hover,
  .nav-dropdown:focus-within {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    inset-inline: auto;
    transform: none;
  }

  .nav-dropdown::before {
    display: none;
  }

  .nav-item:nth-child(2) .nav-dropdown,
  .nav-item:nth-child(6) .nav-dropdown,
  .nav-item:nth-child(7) .nav-dropdown {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    left: auto;
    right: auto;
    transform: none;
  }

  .primary-nav .nav-dropdown a {
    min-height: 38px;
    padding: 9px 12px;
    border: 0;
    background: transparent;
  }

  .primary-nav a.nav-action {
    justify-content: center;
    min-height: 48px;
    margin: 0;
    border-radius: 999px;
  }

  .home-hero {
    --hero-red-height: 43%;
    --solidos-edge-nudge: -.05em;
    min-height: 760px;
    padding-bottom: 0;
  }

  .hero-red-band {
    left: 0;
    right: 0;
    height: 43%;
  }

  .hero-copy {
    left: 12px;
    right: 12px;
    top: 0;
    width: calc(100% - 24px);
    height: var(--hero-red-height);
    padding: 18px 10px 30px;
  }

  .hero-copy h1 {
    font-size: clamp(3.4rem, 7.9vw, 4.4rem);
    gap: 14px;
  }

  .hero-copy h1 span:last-child {
    font-size: .52em;
    top: calc(100% + .58em);
  }

  .home-hero .hero-people {
    right: -7vw;
    bottom: 0;
    width: min(98.9vw, 759px);
    max-height: min(66.7vh, 575px, calc(100% - 108px));
  }

  .hero-cover-logo {
    top: 28px;
    right: 28px;
  }

  .hero-cover-logo img {
    width: 48px;
  }

  .hero-orbit {
    top: 78px;
    left: 5vw;
    right: auto;
    width: 90vw;
  }

  .intro-statement {
    font-size: clamp(1.95rem, 4.9vw, 3.45rem);
  }

  .intro-orbit {
    width: 86vw;
  }

  .section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .performance-board {
    min-height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 22px;
  }

  .performance-board::before,
  .performance-board::after,
  .performance-media {
    display: none;
  }

  .performance-node {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: none;
    min-height: 132px;
    aspect-ratio: auto;
    transform: none;
    border-radius: 8px;
    animation: none;
  }

  .performance-node:hover,
  .performance-node:focus-visible,
  .performance-node.is-active {
    transform: none;
  }

  .performance-node span {
    opacity: 1;
    transform: none;
  }

  .performance-detail {
    position: relative;
    left: auto;
    bottom: auto;
    grid-column: 1 / -1;
    width: 100%;
    order: -1;
  }

  .performance-board {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  .performance-detail {
    display: none;
    min-height: auto;
    padding: 34px 28px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .performance-editorial {
    grid-template-rows: auto;
  }

  .performance-editorial::before {
    display: none;
  }

  .performance-editorial .performance-media {
    display: none;
  }

  .performance-media img {
    height: 160px;
  }

  .performance-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-template-areas: none;
  }

  .performance-group,
  .performance-group-value,
  .performance-group-governance,
  .performance-group-social,
  .performance-group-climate,
  .performance-group-environment {
    grid-column: auto;
    grid-row: auto;
    grid-area: auto;
    grid-template-columns: 1fr;
  }

  .performance-node,
  .performance-group-value .performance-node,
  .performance-group-social .performance-node,
  .performance-group-climate .performance-node,
  .performance-group-environment .performance-node {
    min-height: 118px;
    padding-right: 42px;
  }

  .footer-info,
  .contact-grid,
  .footer-navigation,
  .placeholder-grid,
  .business-model-layout,
  .stakeholders-layout,
  .purpose-layout,
  .esg-layout,
  .culture-layout,
  .topic-layout {
    grid-template-columns: 1fr;
  }

  .ods-body {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vw, 28px);
  }

  .ods-groups {
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  }

  .business-model-copy {
    max-width: 720px;
  }

  .stakeholders-copy p {
    max-width: 760px;
  }

  .stakeholders-media {
    min-height: clamp(360px, 58vw, 520px);
  }

  .purpose-principles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .purpose-principle {
    min-height: auto;
  }

  .purpose-principles.is-interactive {
    flex-direction: column;
    gap: 24px;
    overflow: hidden;
  }

  .purpose-principles.is-interactive .purpose-principle,
  .purpose-principles.is-interactive .purpose-principle.is-open {
    flex: 0 0 auto;
    min-height: 0;
  }

  .purpose-principles.is-interactive .purpose-dot-arrow {
    position: relative;
    top: auto;
    left: auto;
    align-self: center;
    width: 74px;
    height: 36px;
    margin: -8px 0;
    transform: rotate(90deg);
  }

  .esg-diagram {
    min-height: 620px;
  }

  /*
    Estrategia ASG (Creando valor) — SOLO apilado ≤920px.
    Escritorio ≥921 conserva geometría base (triángulo + arcos px).
  */
  .esg-section .esg-diagram {
    --esg-node-top: 18%;
    --esg-node-mid: 51%;
    --esg-node-bottom: 84%;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
  }

  .esg-section .esg-diagram-stage {
    position: relative;
    display: block;
    width: 100%;
    min-height: 720px;
    flex: 0 0 auto;
    isolation: isolate;
  }

  .esg-section .esg-node {
    --esg-node-size: min(210px, 58vw);
  }

  .esg-section .esg-node-governance {
    left: 50%;
    top: var(--esg-node-top);
  }

  .esg-section .esg-node-performance {
    left: 50%;
    top: var(--esg-node-mid);
  }

  .esg-section .esg-node-leadership {
    left: 50%;
    top: var(--esg-node-bottom);
  }

  .esg-section .esg-orbit {
    top: var(--esg-node-mid);
    left: 50%;
    width: min(76vw, 313px);
  }

  /* Puntas ancladas en % del arco (escalan con el anillo; sin offsets px) */
  .esg-section .esg-orbit-arc::after {
    transform: translate(-50%, -50%) rotate(263deg);
  }

  .esg-section .esg-orbit-arc-one::after {
    left: 69.14%;
    top: 4.08%;
  }

  .esg-section .esg-orbit-arc-two::after {
    left: 77.86%;
    top: 89.06%;
  }

  .esg-section .esg-orbit-arc-three::after {
    left: 0.95%;
    top: 52.52%;
  }

  .esg-section .esg-hint {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    z-index: auto;
    width: 100%;
    max-width: none;
    margin: clamp(18px, 3vw, 32px) 0 0;
    transform: none;
  }

  .business-model-diagram {
    --business-node-size: 112px;
    min-height: 640px;
  }

  .business-node-sustainability { left: 15%; }
  .business-node-green { left: 37%; }
  .business-node-dev { left: 50%; }
  .business-node-mining { left: 63%; }
  .business-node-smelting { left: 76%; }
  .business-node-market { left: 89%; }
  .business-node-suppliers { left: 63%; }
  .business-node-chemical { left: 63%; }
  .business-node-process { left: 77%; }

  .ambiental-gestion-intro {
    grid-template-columns: 1fr;
  }

  .ambiental-gestion-row {
    --node-size: clamp(108px, 22vw, 136px);
    --node-overlap: 14px;
  }

  .ambiental-gestion-node span {
    padding: 0 10px;
    font-size: clamp(.6rem, 1.8vw, .72rem);
  }

  .ambiental-gestion-cards {
    grid-template-columns: 1fr;
  }

  .ambiental-agua-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Títulos subtema categoría A — patrón Cadena (única fuente tipográfica) */
  .editorial-title {
    font-size: clamp(2.1rem, 6.4vw, 3.1rem);
    white-space: normal;
  }

  /* Resetea nowrap de wrappers con mayor especificidad (desktop); no redefine tamaño */
  .climate-intro-head .editorial-title.climate-intro-title,
  .culture-heading .editorial-title,
  .esg-layout > .editorial-title,
  .shared-value-heading .editorial-title,
  .purpose-copy .editorial-title,
  .stakeholders-copy .editorial-title {
    white-space: normal;
  }

  .ambiental-residuos-subtitle {
    white-space: normal;
  }

  .ambiental-agua-left {
    display: contents;
  }

  .ambiental-agua-right {
    display: contents;
  }

  .ambiental-agua-intro {
    order: 1;
  }

  .ambiental-agua-cycle {
    order: 2;
  }

  .ambiental-agua-policies-block {
    order: 3;
  }

  .ambiental-agua-strategy {
    order: 4;
  }

  .ambiental-agua-policies {
    justify-content: center;
    gap: clamp(10px, 2.4vw, 16px);
  }

  .ambiental-agua-diagram {
    --agua-size: min(92vw, 360px);
  }

  .ambiental-agua-detail {
    max-width: none;
  }

  .ambiental-agua-metrics-copy,
  .ambiental-agua-metrics-charts {
    grid-template-columns: 1fr;
  }

  .ambiental-agua-eff-chart.ethics-bar-chart {
    gap: clamp(8px, 1.5vw, 14px);
    padding: 44px 10px 0;
    max-width: 100%;
  }

  .ambiental-agua-eff-chart.ethics-bar-chart::before,
  .ambiental-agua-eff-pct-layer {
    top: 44px;
    right: 10px;
    left: 10px;
  }

  .ambiental-agua-eff-pct-labels {
    top: 8px;
    right: 10px;
    left: 10px;
    gap: clamp(8px, 1.5vw, 14px);
  }

  .ambiental-agua-eff-stack {
    width: clamp(12px, 3vw, 16px);
  }

  .ambiental-agua-consumo-legend {
    grid-template-columns: 1fr;
  }

  .ambiental-biodiversidad-layout {
    grid-template-columns: 1fr;
    gap: clamp(22px, 2.6vw, 32px);
  }

  .ambiental-biodiversidad-col-left {
    display: contents;
  }

  .ambiental-biodiversidad-copy { order: 1; }
  .ambiental-biodiversidad-tnfd { order: 2; }
  .ambiental-biodiversidad-pimvs { order: 3; }
  .ambiental-biodiversidad-metrics { order: 4; }

  .ambiental-biodiversidad-pimvs-block--intro,
  .ambiental-biodiversidad-pimvs-block--protocol {
    grid-template-columns: minmax(0, 1.15fr) minmax(140px, .85fr);
  }

  .ambiental-residuos-band--1 {
    grid-template-columns: 1fr;
    gap: clamp(18px, 2.4vw, 28px);
  }

  .ambiental-residuos-policies {
    justify-content: flex-start;
  }

  .ambiental-residuos-defense {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .ambiental-residuos-defense-diagram {
    --residuos-defense-size: min(92vw, 340px);
  }

  .ambiental-residuos-principles-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ambiental-residuos-metrics-panel {
    grid-template-columns: 1fr;
  }

  .ambiental-residuos-indicators {
    grid-template-columns: 1fr;
  }

  .ambiental-residuos-flow-canvas {
    grid-template-columns: 1fr;
    grid-template-areas:
      "gen"
      "todep"
      "deposit"
      "torepro"
      "reprocess"
      "return"
      "deposit-down"
      "reuse";
    justify-items: stretch;
  }

  .ambiental-residuos-flow-node {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }

  .ambiental-residuos-flow-edge {
    justify-items: center;
  }

  .ambiental-residuos-flow-arrow {
    max-width: 64px;
  }

  .ambiental-residuos-flow-arrow--down {
    height: 40px;
  }

  .ambiental-residuos-flow-edge--return .ambiental-residuos-flow-arrow--return {
    transform: rotate(90deg);
    max-width: 48px;
  }

  .climate-intro-layout {
    gap: 28px;
  }

  .climate-intro-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .climate-intro-photo {
    min-height: 260px;
    height: auto;
    border-radius: 0 0 54px 0;
  }

  .climate-intro-photo img {
    min-height: 260px;
    max-height: 320px;
  }

  .climate-intro-text p {
    max-width: none;
  }

  .climate-roadmap-layout {
    grid-template-columns: minmax(0, .34fr) minmax(0, .66fr);
    grid-template-areas:
      "left right"
      "treemap treemap";
    gap: 22px;
  }

  .climate-roadmap-photo--left {
    min-height: 200px;
    max-height: none;
  }

  .climate-roadmap-photo--banner {
    height: 132px;
  }

  .climate-roadmap-table-wrap {
    overflow-x: auto;
  }

  .climate-roadmap-table {
    min-width: 0;
    font-size: .72rem;
  }

  .climate-roadmap-cat span:last-child {
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .climate-roadmap-treemap {
    min-height: 280px;
    gap: 5px;
  }

  .climate-roadmap-cell-label {
    font-size: .7rem;
    line-height: 1.28;
  }

  .climate-block-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .climate-panel--gei .climate-block-grid .ethics-diligence-head,
  .climate-panel--energy .climate-block-grid .ethics-diligence-head,
  .climate-panel--gei .climate-block-grid .climate-donut-card > h3.chart-title,
  .climate-panel--energy .climate-block-grid .climate-donut-card > h3.chart-title {
    min-height: 0;
  }

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

  .rights-detail-visual {
    min-height: clamp(240px, 45vw, 360px);
  }

  .rights-detail-visual img {
    min-height: clamp(240px, 45vw, 360px);
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .rights-process-panel {
    padding: clamp(18px, 3vw, 24px) clamp(14px, 2.5vw, 20px);
  }

  .rights-process-diagram {
    gap: 12px;
  }

  .rights-process-diagram .value-chain-values {
    --node-size: clamp(112px, 24vw, 148px);
    --node-overlap: 14px;
    justify-content: center;
  }

  .rights-process-diagram .value-chain-node + .value-chain-node {
    margin-left: calc(var(--node-overlap) * -1);
  }

  .rights-process-diagram .business-node-dots {
    width: 78px;
    height: 90px;
  }

  .rights-process-diagram .value-chain-node span {
    padding: 0 10px;
    font-size: clamp(.62rem, 1.8vw, .78rem);
  }

  /* —— Social: Nuestra gente (tablet) —— */
  .people-section {
    padding: clamp(36px, 5vw, 56px) 0 clamp(40px, 5.5vw, 64px);
  }

  .people-content-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "metrics"
      "conocer";
    gap: clamp(18px, 3vw, 28px);
  }

  .people-metric-card-body {
    grid-template-columns: 1fr;
  }

  /* Enfoque de gestión: título en flujo + órbita contenida (sin invadir título) */
  .people-management-visual {
    gap: 20px;
    overflow: visible;
  }

  .people-management-diagram-title {
    position: relative;
    z-index: 2;
    margin: 0 0 2px;
    padding: 0;
  }

  .people-management-layout {
    gap: clamp(28px, 4vw, 36px);
  }

  .people-management-stage {
    --orbit-radius: clamp(118px, 26vw, 148px);
    width: min(100%, 460px);
    margin-inline: auto;
    overflow: visible;
  }

  .people-mgmt-node {
    width: clamp(96px, 18vw, 116px);
    height: clamp(96px, 18vw, 116px);
  }

  .people-mgmt-center {
    width: clamp(116px, 22vw, 140px);
    height: clamp(116px, 22vw, 140px);
  }

  .people-mgmt-node-label {
    width: 70%;
    padding: 3px;
    font-size: clamp(.6rem, 1.7vw, .74rem);
    line-height: 1.14;
  }

  .people-mgmt-center .people-mgmt-node-label {
    width: 68%;
    font-size: clamp(.68rem, 1.9vw, .82rem);
    line-height: 1.16;
  }

  .people-mgmt-node-label span {
    max-width: 9.5ch;
  }

  .people-conocer-panel {
    padding: clamp(16px, 3vw, 22px);
  }

  /* —— Social: Seguridad y salud (tablet) —— */
  .safety-section {
    padding: clamp(36px, 5vw, 56px) 0 clamp(40px, 5.5vw, 64px);
  }

  .safety-opening,
  .safety-grid-main,
  .safety-grid-contractors,
  .safety-grid-metrics,
  .safety-triangle-layout {
    grid-template-columns: 1fr;
  }

  .safety-grid-contractors {
    grid-template-areas:
      "copy"
      "cycle"
      "lead";
  }

  .safety-pillars {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .safety-pillar {
    margin-left: 0;
    width: clamp(100px, 22vw, 128px);
  }

  .safety-panel--strategy {
    min-height: 0;
  }

  .safety-strategy-diagram {
    min-height: clamp(300px, 72vw, 360px);
  }

  .safety-strategy-diagram .esg-orbit {
    top: 54%;
    width: min(42vw, 180px);
  }

  .safety-strategy-diagram .esg-node {
    --esg-node-size: min(148px, 36vw);
    padding: 16px 12px;
  }

  .safety-strategy-diagram .esg-node-governance {
    left: 50%;
    top: 18%;
  }

  .safety-strategy-diagram .esg-node-performance {
    left: 76%;
    top: 72%;
  }

  .safety-strategy-diagram .esg-node-leadership {
    left: 24%;
    top: 72%;
  }

  .safety-strategy-diagram .esg-node-index {
    font-size: clamp(2rem, 8vw, 2.8rem);
  }

  .safety-strategy-diagram .esg-node strong {
    font-size: clamp(.66rem, 2.6vw, .78rem);
  }

  .safety-cycle-diagram {
    --cycle-size: min(100%, 380px);
    margin-inline: auto;
  }

  .safety-leadership-logo {
    width: min(100%, 220px);
    margin-inline: auto;
  }

  .pueblos-diagram {
    margin-inline: auto;
  }

  .comunidades-diagram {
    margin-inline: auto;
  }

  /* —— Gobernanza: Ética e integridad —— */
  #etica-integridad {
    scroll-margin-top: 92px;
  }

  .ethics-section {
    padding: clamp(36px, 5vw, 56px) 0 clamp(40px, 5.5vw, 64px);
  }

  .ethics-content-grid {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 36px);
  }

  .ethics-diligence-card {
    --ethics-chart-height: clamp(128px, 30vw, 168px);
    padding: clamp(18px, 3.2vw, 26px) clamp(14px, 2.8vw, 22px);
  }

  .ethics-bar-chart {
    gap: clamp(8px, 1.8vw, 14px);
    min-height: calc(var(--ethics-chart-height) + 64px);
  }

  .ethics-bar {
    width: clamp(12px, 2.8vw, 18px);
  }

  .ethics-bar-label {
    font-size: clamp(.6rem, 1.7vw, .72rem);
  }

  .ethics-evaluation-title {
    font-size: clamp(1.05rem, 3.2vw, 1.28rem);
  }

  /* —— Gobernanza: Cadena de valor responsable —— */
  .value-chain-section {
    padding: clamp(36px, 5vw, 56px) 0 clamp(40px, 5.5vw, 64px);
  }

  .value-chain-opening-grid {
    grid-template-columns: 1fr;
    gap: clamp(20px, 3.5vw, 28px);
  }

  .value-chain-cert-panel {
    grid-template-columns: 1fr;
  }

  .value-chain-cert-photo {
    min-height: clamp(180px, 42vw, 260px);
    max-height: 280px;
  }

  .value-chain-diagram-surface {
    padding: clamp(18px, 3vw, 26px) clamp(10px, 2vw, 18px);
  }

  .value-chain-section .value-chain-values {
    --node-size: clamp(118px, 22vw, 150px);
    --node-overlap: clamp(12px, 2vw, 18px);
    padding-inline: 4px;
  }

  .value-chain-section .value-chain-node:not(.value-chain-node--clientes)::after {
    right: -12px;
    width: 22px;
    height: 22px;
  }

  .value-chain-section .value-chain-node span {
    padding: 0 10px;
    font-size: clamp(.62rem, 1.7vw, .78rem);
  }

  .value-chain-detail {
    margin-top: clamp(16px, 3vw, 24px);
  }

  .value-chain-diligence-panel,
  .value-chain-highlight-panel {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .value-chain-diligence-media img,
  .value-chain-highlight-media img {
    min-height: clamp(200px, 48vw, 280px);
    max-height: 300px;
  }

  .value-chain-diligence-copy,
  .value-chain-highlight-copy {
    padding: clamp(22px, 4vw, 32px) clamp(18px, 3.5vw, 28px);
  }

  .value-chain-highlight-copy p {
    font-size: clamp(1.12rem, 3.6vw, 1.42rem);
  }
}

@media (max-width: 700px) {
  :root {
    --subtitle-after: clamp(6px, 1.6vw, 10px);
    --subtitle-before: clamp(22px, 5vw, 32px);
    --subtitle-diagram-after: clamp(10px, 2.4vw, 14px);
  }

  .primary-nav.open {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .primary-nav a,
  .nav-parent {
    min-height: 46px;
    padding: 13px 16px;
  }

  .home-hero {
    --hero-red-height: 32%;
    --solidos-edge-nudge: -.04em;
    min-height: 720px;
  }

  .hero-red-band {
    height: 32%;
  }

  .hero-copy {
    width: calc(100% - 32px);
    left: 32px;
    top: 0;
    height: var(--hero-red-height);
    padding: 28px 0 34px;
  }

  .hero-copy h1 {
    font-size: clamp(2.78rem, 13.2vw, 3.25rem);
    gap: 12px;
  }

  .hero-copy h1 span:last-child {
    font-size: .46em;
    top: calc(100% + .68em);
  }

  .home-hero .hero-people {
    right: -11vw;
    bottom: 0;
    width: min(96vw, 782px);
    max-height: min(62.1vh, 483px, calc(100% - 96px));
  }

  .home-hero .eyebrow {
    top: 28px;
    font-size: clamp(.72rem, 3vw, .82rem);
    white-space: nowrap;
  }

  .intro-band {
    padding: 86px 0 96px;
  }

  .intro-layout {
    display: block;
  }

  .intro-orbit {
    width: 118vw;
  }

  .intro-band::before {
    display: none;
  }

  .intro-statement {
    font-size: clamp(1.62rem, 6.5vw, 2.42rem);
    line-height: 1.16;
  }

  .section-grid,
  .footer-info,
  .contact-grid,
  .footer-navigation,
  .placeholder-grid,
  .business-model-layout,
  .stakeholders-layout,
  .purpose-layout,
  .esg-layout,
  .topic-layout {
    grid-template-columns: 1fr;
  }

  .editorial-title {
    font-size: clamp(2rem, 8.6vw, 2.75rem);
    white-space: normal;
  }

  .climate-intro-head .editorial-title.climate-intro-title,
  .culture-heading .editorial-title,
  .esg-layout > .editorial-title,
  .shared-value-heading .editorial-title,
  .purpose-copy .editorial-title,
  .stakeholders-copy .editorial-title {
    white-space: normal;
  }

  .stakeholders-section {
    padding: 34px 0 42px;
  }

  .stakeholders-layout {
    gap: 28px;
  }

  .stakeholders-copy .editorial-title {
    margin-bottom: 0;
  }

  .stakeholders-copy .content-kicker {
    margin-bottom: 24px;
  }

  .stakeholders-copy p {
    font-size: 1rem;
    line-height: 1.58;
  }

  .stakeholders-media {
    min-height: 300px;
    border-radius: 0 0 44px 0;
  }

  .purpose-section {
    padding: 38px 0 48px;
  }

  .purpose-layout {
    gap: 24px;
  }

  .purpose-copy .editorial-title {
    margin-bottom: 28px;
  }

  .purpose-highlight {
    max-width: none;
    margin-bottom: 24px;
    font-size: clamp(1.22rem, 5.2vw, 1.58rem);
  }

  .purpose-intro {
    padding-top: 0;
  }

  .purpose-intro p {
    font-size: 1rem;
    line-height: 1.58;
  }

  .purpose-principles {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 3px;
    padding: 84px 18px 24px;
    overflow: hidden;
  }

  .purpose-principles-hint {
    top: 48px;
    width: min(94%, 34em);
  }

  .purpose-principle {
    min-height: 0;
    padding: 34px 22px 24px;
    border-radius: 22px;
  }

  .purpose-principle h4 {
    max-width: 18ch;
  }

  .purpose-dot-arrow {
    position: relative;
    left: auto;
    top: auto;
    justify-self: center;
    width: 74px;
    height: 36px;
    margin: -8px 0;
    transform: rotate(90deg);
  }

  .purpose-dot-arrow-one,
  .purpose-dot-arrow-two {
    left: auto;
  }

  .esg-section {
    padding: 42px 0 54px;
  }

  .esg-layout {
    gap: 28px;
  }

  .esg-highlight {
    max-width: none;
    font-size: clamp(1.18rem, 5vw, 1.56rem);
  }

  .esg-media {
    max-width: none;
    min-height: 260px;
    border-radius: 0 0 38px 0;
  }

  .esg-diagram {
    min-height: 720px;
  }

  .esg-orbit {
    width: min(72vw, 300px);
    top: 50%;
  }

  .esg-node {
    --esg-node-size: min(210px, 58vw);
  }

  .esg-node-governance {
    left: 50%;
    top: 18%;
  }

  .esg-node-performance {
    left: 50%;
    top: 51%;
  }

  .esg-node-leadership {
    left: 50%;
    top: 84%;
  }

  .safety-panel--strategy {
    min-height: 0;
  }

  .safety-strategy-diagram {
    min-height: clamp(280px, 78vw, 340px);
  }

  .safety-strategy-diagram .esg-orbit {
    top: 54%;
    width: min(46vw, 168px);
  }

  .safety-strategy-diagram .esg-node {
    --esg-node-size: min(136px, 36vw);
    padding: 14px 10px;
  }

  .safety-strategy-diagram .esg-node-governance {
    left: 50%;
    top: 18%;
  }

  .safety-strategy-diagram .esg-node-performance {
    left: 76%;
    top: 72%;
  }

  .safety-strategy-diagram .esg-node-leadership {
    left: 24%;
    top: 72%;
  }

  .safety-strategy-diagram .esg-node-index {
    font-size: clamp(1.9rem, 8.5vw, 2.6rem);
  }

  .safety-strategy-diagram .esg-node:hover .esg-node-index,
  .safety-strategy-diagram .esg-node:focus-visible .esg-node-index,
  .safety-strategy-diagram .esg-node.is-active .esg-node-index {
    font-size: clamp(1.35rem, 5.5vw, 1.85rem);
  }

  .safety-strategy-diagram .esg-node strong {
    font-size: clamp(.64rem, 2.7vw, .74rem);
  }

  .culture-section {
    padding: 42px 0 52px;
  }

  .culture-layout {
    gap: 26px;
  }

  .culture-panel {
    padding: 0;
  }

  .culture-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 14px;
  }

  .culture-value {
    width: min(42vw, 190px);
    min-width: 138px;
    margin: 0;
  }

  .culture-detail {
    margin-top: 34px;
    padding: 20px 18px;
  }

  .ods-section {
    padding: 42px 0 50px;
  }

  .ods-body {
    gap: 22px;
  }

  .ods-groups {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ods-group-create,
  .ods-group-protect {
    border-radius: 20px;
  }

  .ods-grid-create .ods-item img,
  .ods-grid-protect .ods-item img {
    width: clamp(64px, 18vw, 88px);
  }

  .shared-value-section {
    padding: 42px 0 56px;
  }

  .shared-value-content {
    grid-template-columns: 1fr;
  }

  .economic-table-wrap {
    overflow-x: auto;
    padding-bottom: 6px;
  }

  .economic-table {
    min-width: 680px;
  }

  .economic-gap-row th,
  .economic-gap-row td {
    padding-top: clamp(28px, 6vw, 42px);
  }

  .economic-retained-row th,
  .economic-retained-row td {
    padding-top: clamp(32px, 6.5vw, 46px);
  }

  .economic-note {
    margin-top: clamp(18px, 4vw, 28px);
  }

  .distribution-card {
    max-width: 420px;
    margin: 0 auto;
  }

  .distribution-legend {
    grid-template-columns: 1fr;
  }

  .business-model-diagram {
    --business-node-size: 160px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 24px 18px;
    overflow: hidden;
  }

  .business-legend {
    display: grid;
    order: 12;
    width: min(100%, 320px);
    gap: 6px;
    margin-top: 2px;
    padding: 16px 18px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .86);
    color: #48515a;
    font-size: .76rem;
    line-height: 1.18;
  }

  .business-flow {
    display: none;
  }

  .business-support,
  .business-node {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
  }

  .business-support {
    width: min(100%, 420px);
    min-height: 74px;
    padding: 18px 28px;
  }

  .business-support-top {
    order: 1;
  }

  .business-support-bottom {
    order: 11;
  }

  .business-node {
    width: min(var(--business-node-size), 58vw);
    min-width: 136px;
    transition: filter .35s ease, opacity .35s ease;
  }

  .business-node:hover,
  .business-node:focus-visible,
  .business-node.is-active {
    transform: none;
  }

  .business-model-diagram.has-active .business-node:not(.is-active) {
    opacity: 1;
  }

  .business-node::after {
    right: 50%;
    top: auto;
    bottom: -9px;
    width: 11px;
    height: 9px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: translateX(50%);
  }

  .business-node .business-node-dots {
    right: 9%;
    top: 50%;
    bottom: auto;
    width: 82%;
    height: 88%;
    transform: translateY(-50%);
  }

  .business-node .business-node-dots i:nth-child(1) { left: 6%; top: 8%; }
  .business-node .business-node-dots i:nth-child(2) { left: 18%; top: 29%; }
  .business-node .business-node-dots i:nth-child(3) { left: 32%; top: 48%; }
  .business-node .business-node-dots i:nth-child(4) { left: 44%; top: 68%; }
  .business-node .business-node-dots i:nth-child(5) { left: 50%; top: 94%; }
  .business-node .business-node-dots i:nth-child(6) { left: 56%; top: 68%; }
  .business-node .business-node-dots i:nth-child(7) { left: 68%; top: 48%; }
  .business-node .business-node-dots i:nth-child(8) { left: 82%; top: 29%; }
  .business-node .business-node-dots i:nth-child(9) { left: 94%; top: 8%; }

  .business-node-sustainability { order: 2; }
  .business-node-green { order: 3; }
  .business-node-dev { order: 4; }
  .business-node-mining { order: 5; }
  .business-node-suppliers { order: 6; }
  .business-node-smelting { order: 7; }
  .business-node-chemical { order: 8; }
  .business-node-process { order: 9; }
  .business-node-market { order: 10; }

  .business-node-market::after {
    display: none;
  }

  .business-detail {
    display: none;
  }

  .contact-heading {
    min-height: 62px;
    padding-inline: 18px;
  }

  .contact-heading p {
    font-size: 18px;
  }

  .contact-card {
    min-height: 0;
  }

  .performance-board {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .performance-board {
    padding: 0;
  }

  .performance-editorial {
    grid-template-rows: auto;
  }

  .performance-editorial::before {
    display: none;
  }

  .performance-media {
    grid-template-columns: 1fr;
  }

  .performance-media img {
    height: 128px;
  }

  .performance-media img:nth-child(n+2) {
    display: none;
  }

  .performance-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: none;
    padding: 0;
  }

  .performance-node,
  .performance-group-value .performance-node,
  .performance-group-social .performance-node,
  .performance-group-climate .performance-node,
  .performance-group-environment .performance-node {
    min-height: 102px;
  }

  .performance-node span {
    max-width: 18ch;
  }

  .section-card {
    height: auto;
    min-height: 210px;
  }

  .section-card p {
    max-height: none;
    margin-top: 12px;
    opacity: 1;
    transform: none;
  }

  .footer-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .footer-action {
    min-width: min(100%, 220px);
  }

  .footer-legal {
    white-space: normal;
  }

  .ambiental-gestion-section {
    padding: 40px 0 52px;
  }

  .ambiental-gestion-row {
    --node-size: 118px;
    --node-overlap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
  }

  .ambiental-gestion-node {
    padding: 10px;
  }

  .ambiental-gestion-node::after {
    right: -12px;
    width: 13px;
    height: 14px;
  }

  .ambiental-gestion-node--2::after,
  .ambiental-gestion-node--6::after {
    display: none;
  }

  .ambiental-gestion-node--3,
  .ambiental-gestion-node--7 {
    margin-left: 0;
  }

  .ambiental-gestion-node span {
    padding: 0 8px;
    font-size: .62rem;
  }

  .ambiental-gestion-risk {
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: 48px;
    padding: 9px 12px;
  }

  .ambiental-gestion-risk-letter {
    font-size: 1.55rem;
  }

  .ambiental-gestion-table {
    min-width: 420px;
  }

  .ambiental-agua-policy {
    width: 104px;
    margin-left: 0;
    padding: 10px 8px;
    font-size: .6rem;
  }

  .ambiental-agua-diagram {
    --agua-size: min(94vw, 340px);
    --agua-sphere-size: clamp(104px, 28vw, 128px);
    --agua-center-size: 88px;
    --agua-orbit-size: 148px;
  }

  .ambiental-agua-sphere strong {
    font-size: .58rem;
  }

  .ambiental-agua-eff-seg b {
    font-size: .54rem;
  }

  .ambiental-agua-eff-pct-labels span {
    font-size: .6rem;
  }

  .ambiental-biodiversidad-section {
    padding: 40px 0 52px;
  }

  .ambiental-biodiversidad-pimvs-block--intro,
  .ambiental-biodiversidad-pimvs-block--protocol {
    grid-template-columns: 1fr;
  }

  .ambiental-biodiversidad-pimvs-list--species {
    columns: 1;
  }

  .ambiental-biodiversidad-photo img {
    max-height: 240px;
  }

  .ambiental-residuos-section {
    padding: 40px 0 52px;
  }

  .ambiental-residuos-policies {
    flex-wrap: wrap;
    justify-content: center;
  }

  .ambiental-residuos-policy {
    width: clamp(112px, 34vw, 136px);
  }

  .ambiental-residuos-defense-diagram {
    --residuos-defense-size: min(100%, 300px);
  }

  .ambiental-residuos-defense-node strong {
    font-size: .68rem;
  }

  .ambiental-residuos-defense-node span {
    font-size: .56rem;
  }

  .ambiental-residuos-flow-figure {
    white-space: normal;
    text-align: center;
  }

  .ambiental-residuos-principles-list {
    grid-template-columns: 1fr;
  }

  .ambiental-residuos-especiales-overview {
    grid-template-columns: 1fr;
  }

  /* Donas residuos reciclados: una columna en móvil */
  .ambiental-residuos-especiales-charts {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 7vw, 36px);
    align-items: start;
  }

  .ambiental-residuos-especiales-chart {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
  }

  .ambiental-residuos-especiales-chart-hint {
    max-width: 38ch;
    margin: 8px auto 16px;
    line-height: 1.45;
  }

  .ambiental-residuos-especiales-donut-wrap {
    width: min(100%, 272px);
    max-width: min(272px, 78%);
    margin: 0 auto 18px;
  }

  .ambiental-residuos-especiales-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 14px;
  }

  .ambiental-residuos-especiales-legend button {
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
  }

  .climate-intro-section {
    padding: 40px 0 52px;
  }

  .climate-intro-layout {
    gap: 24px;
  }

  .climate-intro-photo {
    min-height: 220px;
    border-radius: 0 0 42px 0;
  }

  .climate-intro-photo img {
    min-height: 220px;
    max-height: 260px;
  }

  .climate-roadmap-section {
    --roadmap-icon-box: 36px;
    --roadmap-icon-size: 20px;
    padding: 40px 0 56px;
  }

  .climate-roadmap-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "right"
      "treemap";
    gap: 22px;
  }

  .climate-roadmap-left {
    grid-template-rows: auto auto;
    height: auto;
  }

  .climate-roadmap-photo--left {
    min-height: 0;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 220px;
    border-radius: 0 0 36px 0;
  }

  .climate-roadmap-photo--banner {
    height: 148px;
    border-radius: 0 0 28px 0;
  }

  .climate-roadmap-subtitle {
    margin: 0 0 14px;
    font-size: clamp(1.02rem, 3.8vw, 1.18rem);
    line-height: 1.35;
  }

  .climate-roadmap-treemap-block .climate-roadmap-subtitle {
    max-width: 28ch;
    margin-bottom: 16px;
  }

  /* Tabla → cards apiladas (sin scroll horizontal) */
  .climate-roadmap-table-wrap {
    overflow: visible;
  }

  .climate-roadmap-table {
    min-width: 0;
    width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .84rem;
    line-height: 1.5;
  }

  .climate-roadmap-table thead {
    display: none;
  }

  .climate-roadmap-table tbody {
    display: grid;
    gap: 14px;
  }

  .climate-roadmap-table tbody tr {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 16px 16px 18px;
    background: #fff;
    border: 1px solid rgba(17, 24, 32, .1);
    box-shadow: 0 8px 22px rgba(17, 24, 32, .06);
  }

  .climate-roadmap-table tbody th,
  .climate-roadmap-table tbody td {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .climate-roadmap-table tbody th {
    padding-bottom: 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(66, 130, 222, .22);
  }

  .climate-roadmap-table tbody th::before,
  .climate-roadmap-table tbody td::before {
    display: block;
    margin: 0 0 8px;
    color: #111820;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1.2;
    text-transform: none;
  }

  .climate-roadmap-table tbody th::before {
    content: "Categoría";
    color: var(--orange);
  }

  .climate-roadmap-table tbody td:first-of-type {
    padding: 14px 0 4px;
  }

  .climate-roadmap-table tbody td:first-of-type::before {
    content: "Palanca";
    color: var(--orange);
  }

  .climate-roadmap-table tbody td:last-child {
    padding-top: 14px;
    margin-top: 10px;
    border-top: 1px solid rgba(66, 130, 222, .18);
  }

  .climate-roadmap-table tbody td:last-child::before {
    content: "Desafío";
    color: var(--orange);
  }

  html[lang="en"] .climate-roadmap-table tbody th::before {
    content: "Category";
  }

  html[lang="en"] .climate-roadmap-table tbody td:first-of-type::before {
    content: "Lever";
  }

  html[lang="en"] .climate-roadmap-table tbody td:last-child::before {
    content: "Challenge";
  }

  .climate-roadmap-cat {
    align-items: flex-start;
    gap: 12px;
  }

  .climate-roadmap-cat span:last-child {
    flex: 1;
    min-width: 0;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: break-word;
  }

  .climate-roadmap-table tbody td ul {
    padding-left: 1.15em;
  }

  .climate-roadmap-table tbody td li {
    line-height: 1.48;
  }

  .climate-roadmap-table tbody td li + li {
    margin-top: 6px;
  }

  .climate-roadmap-table tbody tr:hover th,
  .climate-roadmap-table tbody tr:hover td,
  .climate-roadmap-table tbody tr:focus-within th,
  .climate-roadmap-table tbody tr:focus-within td {
    background: transparent;
    box-shadow: none;
  }

  .climate-roadmap-table tbody tr:hover,
  .climate-roadmap-table tbody tr:focus-within {
    border-color: rgba(245, 130, 32, .35);
    box-shadow: 0 10px 26px rgba(17, 24, 32, .1);
  }

  .climate-roadmap-table tbody tr:hover th,
  .climate-roadmap-table tbody tr:focus-within th {
    box-shadow: none;
  }

  /* Treemap: más altura y aire; se conserva la composición */
  .climate-roadmap-treemap {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .95fr);
    gap: 6px;
    min-height: 360px;
  }

  .climate-roadmap-treemap-mid,
  .climate-roadmap-treemap-mid-bottom,
  .climate-roadmap-treemap-side {
    gap: 6px;
  }

  .climate-roadmap-cell {
    padding: 14px 10px;
    gap: 8px;
  }

  .climate-roadmap-cell-label {
    max-width: 14ch;
    padding: 0 2px;
    font-size: clamp(.68rem, 2.8vw, .78rem);
    line-height: 1.3;
    text-wrap: balance;
  }

  .climate-roadmap-cell-plus {
    font-size: 1.12rem;
  }

  .ethics-bar-chart.climate-power-chart {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px 8px;
  }

  .climate-power-bar {
    width: 18px;
  }

  .climate-trend-chart {
    gap: 6px;
  }

  .ethics-bar-chart.climate-gei-emissions-chart {
    width: 100%;
    max-width: none;
    gap: 6px 8px;
    padding-top: 24px;
  }

  .climate-gei-stack-bar {
    width: 18px;
  }

  .climate-gei-hbar-body {
    grid-template-columns: minmax(56px, 72px) minmax(0, 1fr);
    gap: 12px 10px;
  }

  .climate-gei-hbar-labels {
    gap: 20px;
    padding: 12px 0;
  }

  .climate-gei-hbar.safety-hbar-chart {
    gap: 20px;
  }

  .climate-gei-hbar-stack {
    height: 20px;
  }

  .climate-gei-hbar-panel {
    width: 100%;
    max-width: none;
    padding: 12px 10px;
  }

  .climate-block-grid {
    grid-template-columns: 1fr;
  }

  .climate-panel--gei .climate-block-grid .ethics-diligence-head,
  .climate-panel--energy .climate-block-grid .ethics-diligence-head,
  .climate-panel--gei .climate-block-grid .climate-donut-card > h3.chart-title,
  .climate-panel--energy .climate-block-grid .climate-donut-card > h3.chart-title {
    min-height: 0;
  }

  .climate-scope-hbar .safety-hbar-year {
    width: clamp(68px, 22vw, 96px);
  }

  .rights-section {
    padding: 32px 0 44px;
  }

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

  .rights-detail-visual {
    min-height: clamp(220px, 48vw, 320px);
  }

  .rights-detail-visual img {
    min-height: clamp(220px, 48vw, 320px);
  }

  .rights-process-panel {
    padding: 18px 14px;
  }

  .rights-process-diagram .value-chain-values {
    --node-size: clamp(118px, 34vw, 148px);
    --node-overlap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
    max-width: min(100%, 320px);
    margin-inline: auto;
  }

  .rights-process-diagram .value-chain-node + .value-chain-node {
    margin-left: calc(var(--node-overlap) * -1);
  }

  .rights-process-diagram .rights-process-node--2::after,
  .rights-process-diagram .rights-process-node--5::after {
    display: none;
  }

  .rights-process-diagram .rights-process-node--3,
  .rights-process-diagram .rights-process-node--6 {
    margin-left: 0;
  }

  .rights-process-diagram .value-chain-node::after {
    right: -12px;
    width: 14px;
    height: 15px;
  }

  .rights-process-diagram .business-node-dots {
    width: 70px;
    height: 82px;
  }

  .rights-process-diagram .value-chain-node span {
    padding: 0 10px;
    font-size: clamp(.58rem, 2.4vw, .7rem);
  }

  .people-section {
    padding: 28px 0 36px;
  }

  .people-content-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "metrics"
      "conocer";
  }

  .people-metrics-stack {
    grid-template-columns: 1fr;
  }

  .people-metric-card-body {
    grid-template-columns: 1fr;
  }

  .people-metric-card-body--salary .people-callout.value-chain-highlight-copy {
    padding: clamp(22px, 5vw, 30px);
  }

  .people-metric-card-body--salary .people-callout.value-chain-highlight-copy p,
  .people-metric-card-body--salary .people-callout.value-chain-highlight-copy .people-highlight-text {
    font-size: clamp(1.08rem, 4.8vw, 1.38rem);
  }

  .people-metric-card-body--women .people-women-legend {
    align-self: start;
  }

  .people-management-visual {
    gap: 22px;
  }

  .people-management-layout {
    gap: clamp(30px, 6vw, 36px);
  }

  .people-management-stage {
    --orbit-radius: clamp(108px, 28vw, 132px);
    width: min(100%, calc(100vw - 32px), 420px);
  }

  .people-mgmt-node {
    width: clamp(90px, 21vw, 106px);
    height: clamp(90px, 21vw, 106px);
  }

  .people-mgmt-center {
    width: clamp(110px, 25vw, 130px);
    height: clamp(110px, 25vw, 130px);
  }

  .people-mgmt-node-label {
    width: 74%;
    font-size: clamp(.58rem, 2.7vw, .7rem);
    line-height: 1.16;
  }

  .people-mgmt-center .people-mgmt-node-label {
    width: 72%;
    font-size: clamp(.64rem, 3vw, .76rem);
    line-height: 1.18;
  }

  .people-mgmt-node-label span {
    max-width: 9ch;
  }

  .people-mgmt-arrow {
    width: clamp(8px, 2.2vw, 10px);
    height: clamp(7px, 2vw, 9px);
  }

  .safety-section {
    padding: 32px 0 36px;
  }

  .safety-opening,
  .safety-grid-main,
  .safety-grid-contractors,
  .safety-grid-metrics,
  .safety-grid-health,
  .safety-triangle-layout {
    grid-template-columns: 1fr;
  }

  .safety-grid-contractors {
    grid-template-areas:
      "copy"
      "cycle"
      "lead";
  }

  .safety-leadership-logo {
    width: min(100%, 200px);
  }

  .safety-health-interactive {
    gap: 12px;
  }

  .safety-health-diagram {
    max-width: min(100%, 300px);
    margin: 0 auto;
  }

  .safety-health-hint {
    text-align: center;
  }

  .safety-health-detail {
    min-height: 0;
    padding-top: 2px;
  }

  .safety-health-copy .safety-callout--emergency {
    margin-top: 8px;
    grid-template-columns: 1fr;
  }

  .safety-callout--emergency .safety-callout-copy {
    padding: clamp(18px, 4vw, 28px);
  }

  .safety-callout--emergency .safety-callout-emergency-media img {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .safety-cycle-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    justify-items: center;
  }

  .safety-cycle-diagram {
    --cycle-size: min(100%, 340px);
    --cycle-phase-size: clamp(104px, 28vw, 128px);
    --cycle-center-size: clamp(84px, 22vw, 100px);
    --cycle-orbit-size: clamp(132px, 32vw, 158px);
    --cycle-mini-size: clamp(22px, 5.5vw, 28px);
    --cycle-mini-radius: 48.5%;
  }

  .safety-cycle-hint {
    margin-top: 20px;
    text-align: center;
  }

  .safety-cycle-tip {
    max-width: min(220px, calc(100% - 16px));
  }

  .safety-cycle-phase--1 { top: 24%; }
  .safety-cycle-phase--2 { left: 71%; top: 67%; }
  .safety-cycle-phase--3 { left: 29%; top: 67%; }

  .safety-cycle-phase-index {
    font-size: clamp(1.9rem, 7.5vw, 2.4rem);
  }

  .safety-cycle-phase:hover .safety-cycle-phase-index,
  .safety-cycle-phase:focus-visible .safety-cycle-phase-index,
  .safety-cycle-phase.is-active .safety-cycle-phase-index {
    font-size: clamp(1.3rem, 5.2vw, 1.7rem);
  }

  .safety-cycle-phase strong {
    font-size: clamp(.6rem, 2.6vw, .7rem);
  }

  .safety-section .safety-cycle-center .safety-cycle-center-text {
    font-size: clamp(.48rem, 2.2vw, .58rem);
    max-width: 10ch;
    line-height: 1.15;
  }

  .safety-triangle-board {
    min-height: 0;
  }

  .safety-pillars {
    flex-wrap: wrap;
    gap: 8px;
  }

  .safety-pillar {
    margin-left: 0;
    width: clamp(96px, 28vw, 120px);
  }

  .pueblos-section {
    padding: clamp(36px, 8vw, 56px) 0 clamp(40px, 9vw, 64px);
  }

  .pueblos-layout {
    gap: 22px;
  }

  .pueblos-grid-main {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .pueblos-copy {
    gap: 20px;
  }

  .pueblos-diagram {
    width: min(100%, calc(100vw - 32px), 380px);
  }

  .pueblos-center-wrap {
    width: 48%;
    height: 48%;
  }

  .pueblos-center {
    border-width: 4px;
    padding: 11%;
  }

  .pueblos-center span {
    font-size: clamp(.56rem, 2.7vw, .72rem);
    line-height: 1.22;
  }

  .pueblos-sphere {
    width: 40%;
    height: 40%;
    padding: 11% 10%;
  }

  .pueblos-sphere-dots {
    --dot-size: 4px;
    --dot-gap: 4px;
  }

  /* Separación ligera sin romper intersección (antes 9% → más aire) */
  .pueblos-sphere--estudios,
  .pueblos-sphere--gestion,
  .pueblos-sphere--cpli,
  .pueblos-sphere--oportunidades {
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
  }

  .pueblos-sphere--estudios {
    left: 5%;
    top: 5%;
  }

  .pueblos-sphere--gestion {
    right: 5%;
    top: 5%;
  }

  .pueblos-sphere--cpli {
    left: 5%;
    bottom: 5%;
  }

  .pueblos-sphere--oportunidades {
    right: 5%;
    bottom: 5%;
  }

  .pueblos-support {
    margin-top: 10px;
  }

  .pueblos-sphere-label {
    max-width: 10.5em;
    font-size: clamp(.54rem, 2.55vw, .68rem);
    line-height: 1.2;
  }

  .pueblos-hint {
    text-align: center;
  }

  .pueblos-detail {
    min-height: 0;
  }

  .pueblos-cases {
    margin-top: 4px;
    padding-top: 18px;
  }

  .comunidades-section {
    padding: clamp(36px, 8vw, 56px) 0 clamp(40px, 9vw, 64px);
  }

  .comunidades-layout {
    gap: 22px;
  }

  .comunidades-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .comunidades-col--intro {
    gap: 18px;
  }

  .comunidades-callout {
    padding: 20px 18px;
  }

  .comunidades-diagram {
    width: min(100%, 280px);
  }

  .comunidades-orbit {
    width: 50%;
  }

  .comunidades-orbit-spin::before {
    border-width: 3px;
  }

  .comunidades-orbit-arc {
    inset: 5px;
  }

  .comunidades-orbit-arc::after {
    border-top-width: 5px;
    border-bottom-width: 5px;
    border-left-width: 9px;
  }

  .comunidades-node {
    width: 42%;
  }

  .comunidades-node--liderazgo,
  .comunidades-node--gente {
    left: 29%;
  }

  .comunidades-node--sistemas,
  .comunidades-node--metricas {
    top: 29%;
  }

  .comunidades-node-num {
    font-size: clamp(2.2rem, 10vw, 2.9rem);
  }

  .comunidades-node:hover .comunidades-node-num,
  .comunidades-node:focus-visible .comunidades-node-num,
  .comunidades-node.is-active .comunidades-node-num {
    font-size: clamp(1.5rem, 6.5vw, 2rem);
  }

  .comunidades-node-label {
    font-size: clamp(.56rem, 2.6vw, .7rem);
  }

  .comunidades-hint {
    text-align: center;
  }

  .comunidades-supply {
    margin-top: 28px;
    padding-top: 24px;
  }

  .comunidades-supply-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .comunidades-init-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .comunidades-init-label {
    font-size: clamp(.72rem, 3.2vw, .88rem);
  }

  .comunidades-init-ods {
    width: 36px;
    height: 36px;
  }

  .comunidades-init-hint {
    text-align: center;
  }

  .comunidades-init-detail {
    min-height: 0;
  }

  .comunidades-metrics {
    margin-top: 28px;
    padding-top: 24px;
  }

  .comunidades-metrics-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .comunidades-metrics-col--side {
    grid-template-rows: none;
    gap: 18px;
  }

  /* —— Gobernanza ≤700 —— */
  .ethics-section,
  .value-chain-section {
    padding: 32px 0 40px;
  }

  .ethics-diligence-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .ethics-diligence-card {
    --ethics-chart-height: clamp(112px, 34vw, 148px);
  }

  .ethics-bar-chart {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
    min-height: 0;
  }

  .ethics-bar-chart::before {
    display: none;
  }

  .ethics-bar-group {
    padding: 10px 8px 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, .55);
  }

  .ethics-eval-block {
    padding-top: 14px;
  }

  .value-chain-section .value-chain-values {
    --node-size: clamp(126px, 36vw, 156px);
    --node-overlap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 12px;
    max-width: min(100%, 340px);
    margin-inline: auto;
  }

  .value-chain-section .value-chain-node--proveedores::after {
    display: none;
  }

  .value-chain-section .value-chain-node--contratistas {
    margin-left: 0;
  }

  .value-chain-section .value-chain-node span {
    font-size: clamp(.58rem, 2.4vw, .7rem);
    line-height: 1.2;
  }

  .value-chain-hint {
    font-size: .86rem;
  }

  .value-chain-cert-copy {
    padding: 18px 16px;
  }

  .value-chain-diligence-copy p {
    font-size: .92rem;
  }

  .value-chain-highlight-copy p {
    font-size: clamp(1.08rem, 4.6vw, 1.32rem);
  }
}

@media (max-width: 480px) {
  :root {
    --site-header-height: 60px;
  }

  .site-header {
    --site-header-height: 60px;
    min-height: var(--site-header-height);
  }

  .brand img {
    height: 48px;
  }

  .menu-toggle {
    margin-right: 10px;
  }

  .primary-nav {
    top: var(--site-header-height, 60px);
    height: calc(100svh - var(--site-header-height, 60px));
    height: calc(100dvh - var(--site-header-height, 60px));
    max-height: calc(100svh - var(--site-header-height, 60px));
    max-height: calc(100dvh - var(--site-header-height, 60px));
    padding-left: 14px;
    padding-right: 14px;
  }

  .home-hero {
    --hero-red-height: 34%;
    min-height: 700px;
  }

  .hero-copy {
    left: 22px;
    width: calc(100% - 44px);
    padding: 24px 0 44px;
  }

  /* Home móvil: acercar L1–L2 al corte naranja y sacar L3 debajo (solo eje Y). */
  .home-hero .hero-copy {
    padding: 24px 0 8px;
  }

  .hero-copy h1 {
    font-size: clamp(2.4rem, 12.8vw, 2.92rem);
    gap: 10px;
  }

  .home-hero .hero-copy h1 {
    gap: 4px;
  }

  .hero-copy h1 span:last-child {
    font-size: .48em;
    top: calc(100% + .72em);
  }

  .home-hero .hero-copy h1 span:last-child {
    top: calc(100% + 10px);
  }

  /* EN: leve acercamiento de Results with al borde (sin agrandar hueco vs SOLID). */
  html[lang="en"] .home-hero .hero-copy h1 > span:first-child {
    position: relative;
    top: 6px;
  }

  .culture-values {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .culture-value {
    width: min(72vw, 210px);
  }

  .ambiental-gestion-row {
    --node-size: min(46vw, 150px);
    --node-overlap: 12px;
  }

  .ambiental-gestion-node span {
    font-size: .6rem;
  }

  .ambiental-gestion-table {
    min-width: 360px;
  }

  .ambiental-agua-policies {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .ambiental-agua-policy {
    margin-left: 0;
    width: min(42vw, 130px);
  }

  .ambiental-agua-diagram {
    --agua-sphere-size: clamp(96px, 30vw, 118px);
  }

  /* Leyendas de residuos reciclados: 1 columna en anchos muy estrechos */
  .ambiental-residuos-especiales-legend,
  .ambiental-residuos-especiales-legend--peligrosos,
  .ambiental-residuos-especiales-legend--special {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 4px 0;
  }

  .ambiental-residuos-especiales-donut-wrap {
    width: min(100%, 248px);
    max-width: min(248px, 82%);
  }

  /* —— Cambio climático: palancas + treemap ≤480 —— */
  .climate-roadmap-section {
    --roadmap-icon-box: 34px;
    --roadmap-icon-size: 18px;
  }

  .climate-roadmap-subtitle {
    font-size: clamp(.98rem, 4.4vw, 1.1rem);
    line-height: 1.38;
  }

  .climate-roadmap-treemap-block .climate-roadmap-subtitle {
    max-width: none;
    margin-bottom: 14px;
  }

  .climate-roadmap-table tbody {
    gap: 12px;
  }

  .climate-roadmap-table tbody tr {
    padding: 14px 14px 16px;
  }

  .climate-roadmap-table {
    font-size: .82rem;
  }

  .climate-roadmap-cat span:last-child {
    font-size: .88rem;
  }

  .climate-roadmap-table tbody th::before,
  .climate-roadmap-table tbody td::before {
    font-size: .7rem;
  }

  /* Treemap móvil: rejilla legible (mismos colores e interacción) */
  .climate-roadmap-treemap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(96px, auto);
    gap: 6px;
    min-height: 0;
    height: auto;
  }

  .climate-roadmap-treemap-mid,
  .climate-roadmap-treemap-mid-bottom,
  .climate-roadmap-treemap-side {
    display: contents;
  }

  .climate-roadmap-cell--renewables {
    grid-column: 1 / -1;
    min-height: 108px;
  }

  .climate-roadmap-cell {
    min-height: 96px;
    padding: 14px 12px;
    gap: 8px;
  }

  .climate-roadmap-cell-label {
    max-width: 16ch;
    font-size: clamp(.7rem, 3.4vw, .8rem);
    line-height: 1.32;
  }

  .climate-roadmap-cell-plus {
    font-size: 1.15rem;
  }

  /* —— Social ≤480 —— */
  .rights-section,
  .people-section,
  .safety-section,
  .pueblos-section,
  .comunidades-section {
    padding: 28px 0 36px;
  }

  .rights-process-diagram .value-chain-values {
    --node-size: min(42vw, 136px);
    --node-overlap: 12px;
    max-width: min(100%, 300px);
  }

  .rights-process-diagram .value-chain-node span {
    font-size: .58rem;
  }

  .people-management-visual {
    gap: 20px;
  }

  .people-management-layout {
    gap: 32px;
  }

  .people-management-stage {
    --orbit-radius: clamp(100px, 27.5vw, 118px);
    width: min(100%, calc(100vw - 24px));
  }

  .people-mgmt-node {
    width: clamp(86px, 23vw, 100px);
    height: clamp(86px, 23vw, 100px);
  }

  .people-mgmt-center {
    width: clamp(104px, 27vw, 120px);
    height: clamp(104px, 27vw, 120px);
  }

  .people-mgmt-node-label {
    width: 76%;
    font-size: clamp(.55rem, 2.9vw, .64rem);
    line-height: 1.15;
  }

  .people-mgmt-center .people-mgmt-node-label {
    width: 74%;
    font-size: clamp(.6rem, 3.1vw, .7rem);
    line-height: 1.17;
  }

  .people-mgmt-node-label span {
    max-width: 8.5ch;
  }

  .safety-strategy-diagram {
    min-height: clamp(260px, 82vw, 320px);
  }

  .safety-strategy-diagram .esg-node {
    --esg-node-size: min(124px, 34vw);
  }

  .safety-cycle-diagram {
    --cycle-size: min(100%, 300px);
    --cycle-phase-size: clamp(96px, 28vw, 116px);
    --cycle-center-size: clamp(76px, 22vw, 92px);
  }

  .safety-pillar {
    width: min(44vw, 118px);
  }

  .pueblos-diagram {
    width: min(100%, calc(100vw - 24px));
  }

  .pueblos-center-wrap {
    width: 50%;
    height: 50%;
  }

  .pueblos-center {
    padding: 10%;
  }

  .pueblos-center span {
    font-size: clamp(.52rem, 3.1vw, .64rem);
    line-height: 1.24;
  }

  .pueblos-sphere {
    width: 39%;
    height: 39%;
    padding: 10% 9%;
  }

  .pueblos-sphere--estudios {
    left: 4.5%;
    top: 4.5%;
  }

  .pueblos-sphere--gestion {
    right: 4.5%;
    top: 4.5%;
  }

  .pueblos-sphere--cpli {
    left: 4.5%;
    bottom: 4.5%;
  }

  .pueblos-sphere--oportunidades {
    right: 4.5%;
    bottom: 4.5%;
  }

  .pueblos-sphere-label {
    max-width: 10em;
    font-size: clamp(.5rem, 3vw, .62rem);
    line-height: 1.2;
  }

  .comunidades-diagram {
    width: min(100%, 280px);
  }

  .comunidades-init-tabs {
    grid-template-columns: 1fr;
  }

  .comunidades-init-tab {
    border-right-width: 0;
  }

  .comunidades-init-tab:nth-child(-n+2) {
    border-bottom-width: 0;
  }

  .comunidades-init-label {
    font-size: clamp(.88rem, 3.8vw, 1rem);
  }

  /* —— Gobernanza ≤480 —— */
  .ethics-section,
  .value-chain-section {
    padding: 28px 0 36px;
  }

  .ethics-diligence-card {
    --ethics-chart-height: 108px;
    padding: 16px 12px 18px;
  }

  .ethics-bar {
    width: 14px;
  }

  .ethics-bar-value {
    font-size: .68rem;
  }

  .ethics-bar-label {
    font-size: .58rem;
  }

  .value-chain-section .value-chain-values {
    --node-size: min(44vw, 148px);
    --node-overlap: 12px;
    max-width: min(100%, 320px);
  }

  .value-chain-section .value-chain-node:not(.value-chain-node--clientes)::after {
    right: -10px;
    width: 18px;
    height: 18px;
  }

  .value-chain-cert-logos img {
    height: 36px;
  }

  .value-chain-diligence-media img,
  .value-chain-highlight-media img {
    min-height: 180px;
    max-height: 220px;
  }

  .value-chain-diligence-copy,
  .value-chain-highlight-copy {
    padding: 20px 16px;
  }
}

@keyframes mobileMenuIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   Portadas responsive ≤920 — sistema piloto Creando valor
   Aplicado a: value / climate / ambiental / social / gobernanza
   Escritorio ≥921: solo wrappers media + anclas de órbita/cue
   ============================================================ */

@media (min-width: 921px) {
  /* EN home: bajar solo “Results with” hacia el corte de la franja naranja. */
  html[lang="en"] .home-hero .hero-copy h1 > span:first-child {
    position: relative;
    top: 18px;
  }

  /* Los hijos participan del stacking del stage (persona encima de plasta) */
  .value-hero-media,
  .social-hero-media,
  .ambiental-hero-media,
  .climate-hero-media,
  .gobernanza-hero-media {
    display: contents;
  }

  .gobernanza-hero-stage,
  .climate-hero-stage {
    position: relative;
    width: 100%;
    min-height: inherit;
    isolation: isolate;
  }

  .value-hero .value-scroll-cue,
  .social-hero .social-scroll-cue,
  .ambiental-hero .ambiental-scroll-cue {
    pointer-events: auto;
    z-index: 8;
  }

  /* Copy y cue anidados en wash (Climate / Gobernanza) */
  .climate-hero-wash,
  .gobernanza-hero-wash {
    z-index: 2;
    display: block;
    overflow: visible;
  }

  .climate-hero-wash .climate-hero-copy,
  .gobernanza-hero-wash .gobernanza-hero-copy {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    transform: none;
    width: 100%;
    min-height: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .climate-hero-wash .climate-scroll-cue,
  .gobernanza-hero-wash .gobernanza-scroll-cue {
    pointer-events: auto;
    left: auto;
    right: clamp(38px, 4.8vw, 72px);
    top: auto;
    bottom: clamp(32px, 4.2vw, 52px);
    transform: none;
  }
}

@media (max-width: 920px) {
  .value-hero,
  .social-hero,
  .ambiental-hero,
  .climate-hero,
  .gobernanza-hero {
    box-sizing: border-box;
    height: calc(100svh - var(--site-header-height, 66px));
    height: calc(100dvh - var(--site-header-height, 66px));
    max-height: calc(100svh - var(--site-header-height, 66px));
    max-height: calc(100dvh - var(--site-header-height, 66px));
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #fff;
  }

  .value-hero .value-hero-stage,
  .social-hero .social-hero-stage,
  .ambiental-hero .ambiental-hero-stage,
  .climate-hero .climate-hero-stage,
  .gobernanza-hero .gobernanza-hero-stage {
    position: relative;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    background: #fff;
  }

  .value-hero .value-hero-media,
  .social-hero .social-hero-media,
  .ambiental-hero .ambiental-hero-media,
  .climate-hero .climate-hero-media,
  .gobernanza-hero .gobernanza-hero-media {
    grid-row: 1;
    grid-column: 1;
    position: relative;
    z-index: 1;
    min-height: 0;
    height: auto;
    max-height: 100%;
    overflow: hidden;
    isolation: isolate;
    pointer-events: auto;
  }

  .value-hero .value-hero-bg,
  .social-hero .social-hero-bg,
  .social-hero .social-hero-photo,
  .ambiental-hero .ambiental-hero-bg,
  .ambiental-hero .ambiental-hero-photo,
  .climate-hero .climate-hero-bg,
  .climate-hero .climate-hero-photo,
  .gobernanza-hero .gobernanza-hero-bg,
  .gobernanza-hero .gobernanza-hero-photo {
    position: absolute;
    inset: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-width: none;
    opacity: 1;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
  }

  .value-hero .value-hero-bg {
    object-fit: cover;
    object-position: 58% 42%;
  }

  .social-hero .social-hero-bg,
  .social-hero .social-hero-photo {
    background-position: 62% 40%;
  }

  .ambiental-hero .ambiental-hero-bg,
  .ambiental-hero .ambiental-hero-photo {
    background-position: 55% 38%;
  }

  .climate-hero .climate-hero-bg,
  .climate-hero .climate-hero-photo {
    background-position: 42% 28%;
  }

  .gobernanza-hero .gobernanza-hero-bg,
  .gobernanza-hero .gobernanza-hero-photo {
    background-position: 38% 32%;
  }

  .value-hero .value-orbit,
  .social-hero .social-orbit,
  .ambiental-hero .ambiental-orbit,
  .climate-hero .climate-orbit,
  .gobernanza-hero .gobernanza-orbit {
    position: absolute;
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    z-index: 2;
    width: min(70%, 300px);
    height: min(82%, 380px);
    max-width: 100%;
    max-height: 100%;
    opacity: .4;
    transform: none;
    translate: -50% -50%;
    pointer-events: none;
  }

  /* Escala proporcional por recurso; % relativo al wrapper visual */
  .value-hero .value-people {
    position: absolute;
    inset-inline-end: 0;
    inset-inline-start: auto;
    top: auto;
    bottom: 0;
    z-index: 3;
    width: clamp(360px, 86%, 620px);
    max-width: 100%;
    max-height: 94%;
    height: auto;
    overflow: visible;
    object-fit: contain;
    object-position: right bottom;
    transform: none;
    filter: none;
    pointer-events: none;
  }

  /* Social: escala fluida de persona — reducción moderada vs. estado previo (74%/94%) */
  .social-hero .social-hero-visual {
    position: absolute;
    inset-inline-end: clamp(16px, 5vw, 32px);
    inset-inline-start: auto;
    top: auto;
    bottom: 0;
    z-index: 3;
    width: clamp(270px, 38%, 480px);
    max-width: 100%;
    max-height: 88%;
    height: auto;
    overflow: visible;
    transform: none;
    filter: none;
    pointer-events: none;
  }

  .ambiental-hero .ambiental-hero-visual {
    position: absolute;
    inset-inline-end: clamp(16px, 5vw, 32px);
    inset-inline-start: auto;
    top: auto;
    bottom: 0;
    z-index: 3;
    width: clamp(280px, 70%, 520px);
    max-width: 100%;
    max-height: 94%;
    height: auto;
    overflow: visible;
    transform: none;
    filter: none;
    pointer-events: none;
  }

  .social-hero .social-hero-visual img,
  .ambiental-hero .ambiental-hero-visual img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: right bottom;
  }

  .climate-hero .climate-hero-visual {
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: auto;
    top: auto;
    bottom: 0;
    z-index: 3;
    width: clamp(320px, 82%, 580px);
    max-width: 100%;
    max-height: 96%;
    height: auto;
    overflow: visible;
    transform: none;
    filter: none;
    pointer-events: none;
  }

  .gobernanza-hero .gobernanza-hero-visual {
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: auto;
    top: auto;
    bottom: 0;
    z-index: 3;
    width: clamp(340px, 88%, 620px);
    max-width: 100%;
    max-height: 96%;
    height: auto;
    overflow: visible;
    transform: none;
    filter: none;
    pointer-events: none;
  }

  .climate-hero .climate-hero-visual img,
  .gobernanza-hero .gobernanza-hero-visual img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: left bottom;
  }

  .value-hero .value-scroll-cue,
  .social-hero .social-scroll-cue,
  .ambiental-hero .ambiental-scroll-cue,
  .climate-hero .climate-scroll-cue,
  .gobernanza-hero .gobernanza-scroll-cue {
    position: absolute;
    left: auto;
    right: clamp(16px, 4vw, 28px);
    top: auto;
    bottom: calc(100% + clamp(12px, 3vw, 20px));
    z-index: 4;
    transform: none;
    pointer-events: auto;
  }

  .climate-hero .climate-scroll-cue,
  .gobernanza-hero .gobernanza-scroll-cue {
    right: clamp(16px, 4vw, 28px);
  }

  .value-hero .value-panel,
  .social-hero .social-hero-wash,
  .ambiental-hero .ambiental-hero-wash,
  .climate-hero .climate-hero-wash,
  .gobernanza-hero .gobernanza-hero-wash {
    grid-row: 2;
    grid-column: 1;
    align-self: end;
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: clamp(28px, 5vw, 40px) clamp(24px, 6vw, 48px) clamp(32px, 5.5vw, 48px);
    overflow: visible;
    color: #fff;
    background: linear-gradient(90deg, rgba(242, 58, 28, .98) 0%, rgba(244, 96, 24, .97) 54%, rgba(204, 79, 24, .98) 100%);
    box-shadow: none;
    transform: none;
    clip-path: none;
    pointer-events: auto;
  }

  .climate-hero .climate-hero-wash,
  .gobernanza-hero .gobernanza-hero-wash {
    background: linear-gradient(270deg, rgba(242, 58, 28, .98) 0%, rgba(244, 96, 24, .97) 54%, rgba(204, 79, 24, .98) 100%);
  }

  .value-hero .value-panel::after,
  .social-hero .social-hero-wash::after,
  .ambiental-hero .ambiental-hero-wash::after,
  .social-hero .social-hero-stage::after,
  .ambiental-hero .ambiental-hero-stage::after {
    display: none;
  }

  .value-hero .value-copy,
  .social-hero .social-hero-copy,
  .ambiental-hero .ambiental-hero-copy,
  .climate-hero .climate-hero-copy,
  .gobernanza-hero .gobernanza-hero-copy {
    position: relative;
    z-index: 1;
    top: auto;
    right: auto;
    left: auto;
    width: auto;
    max-width: min(100%, 520px);
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    transform: none;
    text-align: left;
    align-items: flex-start;
  }

  .value-hero .value-copy h1,
  .social-hero .social-hero-copy h1,
  .ambiental-hero .ambiental-hero-copy h1,
  .climate-hero .climate-hero-copy h1,
  .gobernanza-hero .gobernanza-hero-copy h1 {
    max-width: min(100%, 520px);
    margin: 0;
    color: #fff;
    font-size: clamp(2.35rem, 7.5vw, 3.6rem);
    line-height: .98;
    text-align: left;
  }

  .value-hero .value-copy p,
  .social-hero .social-hero-copy p,
  .ambiental-hero .ambiental-hero-copy p,
  .climate-hero .climate-hero-copy p,
  .gobernanza-hero .gobernanza-hero-copy p {
    max-width: min(100%, 520px);
    margin: clamp(12px, 2.8vw, 18px) 0 0;
    color: rgba(255, 255, 255, .94);
    font-size: clamp(.9rem, 2.2vw, 1.02rem);
    line-height: 1.42;
    text-align: left;
  }

  .climate-hero .climate-hero-copy,
  .gobernanza-hero .gobernanza-hero-copy {
    margin-left: 0;
    margin-right: 0;
  }

  .climate-hero .climate-hero-copy h1,
  .climate-hero .climate-hero-copy p,
  .gobernanza-hero .gobernanza-hero-copy h1,
  .gobernanza-hero .gobernanza-hero-copy p {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 700px) {
  .value-hero .value-copy h1,
  .social-hero .social-hero-copy h1,
  .ambiental-hero .ambiental-hero-copy h1,
  .climate-hero .climate-hero-copy h1,
  .gobernanza-hero .gobernanza-hero-copy h1 {
    font-size: clamp(2.15rem, 11vw, 3rem);
  }

  .value-hero .value-copy p,
  .social-hero .social-hero-copy p,
  .ambiental-hero .ambiental-hero-copy p,
  .climate-hero .climate-hero-copy p,
  .gobernanza-hero .gobernanza-hero-copy p {
    font-size: .9rem;
  }

  .value-hero .value-panel,
  .social-hero .social-hero-wash,
  .ambiental-hero .ambiental-hero-wash,
  .climate-hero .climate-hero-wash,
  .gobernanza-hero .gobernanza-hero-wash {
    padding: 26px 24px 36px;
  }

  .value-hero .value-people {
    width: clamp(320px, 90%, 560px);
  }

  /* Social: ~10–15% más pequeña que el bloque ≤920 previo */
  .social-hero .social-hero-visual {
    width: clamp(230px, 60%, 400px);
    max-height: 82%;
    inset-inline-end: clamp(12px, 4vw, 24px);
  }

  .ambiental-hero .ambiental-hero-visual {
    width: clamp(260px, 76%, 480px);
    inset-inline-end: clamp(12px, 4vw, 24px);
  }

  .climate-hero .climate-hero-visual {
    width: clamp(300px, 88%, 540px);
  }

  .gobernanza-hero .gobernanza-hero-visual {
    width: clamp(310px, 92%, 560px);
  }
}

@media (max-width: 480px) {
  .value-hero,
  .social-hero,
  .ambiental-hero,
  .climate-hero,
  .gobernanza-hero {
    height: calc(100svh - var(--site-header-height, 60px));
    height: calc(100dvh - var(--site-header-height, 60px));
    max-height: calc(100svh - var(--site-header-height, 60px));
    max-height: calc(100dvh - var(--site-header-height, 60px));
  }

  .value-hero .value-people {
    width: clamp(300px, 100%, 520px);
  }

  /* Social: ~18–25% más pequeña; libera ambulancia y entorno */
  .social-hero .social-hero-visual {
    width: clamp(196px, 70%, 320px);
    max-height: 76%;
    inset-inline-end: clamp(8px, 3.5vw, 18px);
  }

  .ambiental-hero .ambiental-hero-visual {
    width: clamp(240px, 82%, 440px);
    inset-inline-end: clamp(8px, 3.5vw, 18px);
  }

  .climate-hero .climate-hero-visual {
    width: clamp(280px, 100%, 500px);
  }

  .gobernanza-hero .gobernanza-hero-visual {
    width: clamp(290px, 96%, 520px);
  }
}