/* Generado por scripts/dev/gen_landing.py desde landing/pagina.html: no editar acá */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/bc87d8e058.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fuentes/a80b2cab5e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(/fuentes/0bc4139f48.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fuentes/0bc4139f48.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/0bc4139f48.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fuentes/0bc4139f48.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
    --suelo: #E6E8E3;
    --suelo-2: #DDE0DA;
    --suelo-alto: #F1F2EE;
    --tinta: #161C20;
    --tinta-2: #465058;
    --tenue: #6A737A;
    --curva: rgba(22, 28, 32, .14);
    --marco: rgba(22, 28, 32, .22);
    --ambar: #C2731A;
    --ambar-texto: #8C4C0E;
    --ambar-suave: rgba(194, 115, 26, .12);
    --pizarra: #33689B;
    --vidrio: rgba(246, 247, 243, .78);
    --telefono: #1A2024;
    --pantalla: #F4F5F1;
    --pantalla-tinta: #1A2024;
    --pantalla-tenue: #6A737A;
    --pantalla-linea: rgba(22, 28, 32, .09);
    --sombra: 0 40px 90px -40px rgba(22, 28, 32, .45);
    --gl-linea: #161C20;
    --gl-acento: #C2731A;
    --gl-fuerza: 0.85;
    --lexend: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
    /* margen lateral proporcional a la pantalla: en PC el contenido acompaña al marco del plano en vez de quedar en 1200 px */
    --gutter: clamp(18px, 4.5vw, 96px);
    --ancho: 1640px;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --suelo: #0B0E10;
      --suelo-2: #101418;
      --suelo-alto: #151A1E;
      --tinta: #ECEFF1;
      --tinta-2: #AAB3BA;
      --tenue: #7F888F;
      --curva: rgba(236, 239, 241, .12);
      --marco: rgba(236, 239, 241, .18);
      --ambar: #E8963C;
      --ambar-texto: #F0AD62;
      --ambar-suave: rgba(232, 150, 60, .13);
      --pizarra: #5B9BD5;
      --vidrio: rgba(16, 20, 24, .72);
      --telefono: #050709;
      --pantalla: #121619;
      --pantalla-tinta: #ECEFF1;
      --pantalla-tenue: #8A929A;
      --pantalla-linea: rgba(236, 239, 241, .08);
      --sombra: 0 50px 110px -44px rgba(0, 0, 0, .9);
      --gl-linea: #ECEFF1;
      --gl-acento: #E8963C;
      --gl-fuerza: 0.7;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --suelo: #0B0E10;
    --suelo-2: #101418;
    --suelo-alto: #151A1E;
    --tinta: #ECEFF1;
    --tinta-2: #AAB3BA;
    --tenue: #7F888F;
    --curva: rgba(236, 239, 241, .12);
    --marco: rgba(236, 239, 241, .18);
    --ambar: #E8963C;
    --ambar-texto: #F0AD62;
    --ambar-suave: rgba(232, 150, 60, .13);
    --pizarra: #5B9BD5;
    --vidrio: rgba(16, 20, 24, .72);
    --telefono: #050709;
    --pantalla: #121619;
    --pantalla-tinta: #ECEFF1;
    --pantalla-tenue: #8A929A;
    --pantalla-linea: rgba(236, 239, 241, .08);
    --sombra: 0 50px 110px -44px rgba(0, 0, 0, .9);
    --gl-linea: #ECEFF1;
    --gl-acento: #E8963C;
    --gl-fuerza: 0.7;
    color-scheme: dark;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--suelo);
    color: var(--tinta);
    font-family: var(--lexend);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; }
  h1, h2, h3 { margin: 0; text-wrap: balance; }
  p { margin: 0; }
  :focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; border-radius: 6px; }
  .ancho { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }
  .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .etiqueta { font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }

  .boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 50px; padding: 0 24px; border-radius: 999px;
    font: inherit; font-size: 1rem; font-weight: 400; text-decoration: none; cursor: pointer;
    border: 1px solid transparent; transition: transform .25s ease, background-color .25s ease, border-color .25s ease;
  }
  .boton svg { width: 18px; height: 18px; }
  .boton--primario { background: var(--ambar); color: #14100B; }
  .boton--primario:hover { transform: translateY(-2px); }
  .boton--linea { border-color: var(--marco); color: var(--tinta); background: var(--vidrio); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .boton--linea:hover { border-color: var(--tinta-2); }

  /* ================================================================ relieve (hero) */
  .mapa {
    position: relative; isolation: isolate; overflow: hidden;
    height: min(100svh, 1100px); min-height: 620px;
    background: radial-gradient(120% 85% at 72% 30%, var(--suelo-alto) 0%, var(--suelo) 62%);
  }
  .mapa canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }
  .mapa.sin-webgl {
    background:
      repeating-radial-gradient(ellipse 70% 48% at 70% 42%, transparent 0 26px, var(--curva) 26px 27px),
      radial-gradient(120% 85% at 72% 30%, var(--suelo-alto) 0%, var(--suelo) 62%);
  }
  .mapa::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 62%; z-index: -1; pointer-events: none;
    background: linear-gradient(to top, var(--suelo) 12%, color-mix(in srgb, var(--suelo) 55%, transparent) 55%, transparent);
  }
  .marco { position: absolute; inset: clamp(10px, 1.6vw, 20px); border: 1px solid var(--marco); pointer-events: none; z-index: 0; }
  .marco span { position: absolute; font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; color: var(--tenue); background: var(--suelo); padding: 0 6px; white-space: nowrap; }
  .marco .c1 { top: -9px; left: 22%; } .marco .c2 { top: -9px; left: 64%; }
  .marco .c3 { bottom: -9px; left: 22%; } .marco .c4 { bottom: -9px; left: 64%; }
  .marco .c5 { left: -9px; top: 34%; writing-mode: vertical-rl; transform: rotate(180deg); padding: 6px 0; }
  .marco .c6 { left: -9px; top: 74%; writing-mode: vertical-rl; transform: rotate(180deg); padding: 6px 0; }
  .marco i { position: absolute; width: 7px; height: 7px; border-color: var(--tinta-2); border-style: solid; }
  .marco .e1 { top: -1px; left: -1px; border-width: 1.5px 0 0 1.5px; } .marco .e2 { top: -1px; right: -1px; border-width: 1.5px 1.5px 0 0; }
  .marco .e3 { bottom: -1px; left: -1px; border-width: 0 0 1.5px 1.5px; } .marco .e4 { bottom: -1px; right: -1px; border-width: 0 1.5px 1.5px 0; }

  .barra { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: clamp(26px, 3.2vw, 38px) 0; }
  .logo { display: inline-flex; }
  .logo svg { width: 150px; height: 48px; display: block; }
  .nav { display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: var(--vidrio); border: 1px solid var(--curva); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .nav a { text-decoration: none; font-size: .9rem; font-weight: 400; color: var(--tinta-2); padding: 8px 14px; border-radius: 999px; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
  .nav a:hover { color: var(--tinta); background: var(--curva); }
  .nav a.nav__demo { background: var(--tinta); color: var(--suelo); }
  .nav a.nav__demo:hover { background: var(--tinta); color: var(--suelo); }

  .titular { position: absolute; left: 0; right: 0; bottom: clamp(34px, 8vh, 86px); z-index: 2; }
  .titular .ancho { display: grid; gap: 22px; justify-items: start; }
  .titular h1 { font-weight: 200; font-size: clamp(2.7rem, 6.4vw, 6.6rem); line-height: .96; letter-spacing: -.045em; max-width: 13.5ch; }
  .titular h1 em { font-style: normal; color: var(--ambar-texto); }
  .titular p { max-width: 50ch; color: var(--tinta-2); font-size: clamp(1rem, 1.35vw, 1.15rem); }
  .acciones { display: flex; flex-wrap: wrap; gap: 12px; }

  .sondaje { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; will-change: transform; transition: opacity .4s ease; }
  .sondaje__punto { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 0 5px var(--ambar-suave); }
  .sondaje__linea { position: absolute; left: 0; bottom: 0; width: 1px; height: 74px; background: linear-gradient(to top, var(--ambar), transparent); }
  .sondaje__rotulo { position: absolute; left: -2px; bottom: 80px; display: grid; gap: 1px; font-family: var(--mono); font-size: .7rem; letter-spacing: .04em; white-space: nowrap; color: var(--tinta); background: var(--vidrio); border: 1px solid var(--curva); border-radius: 10px; padding: 6px 10px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .sondaje__rotulo b { font-weight: 500; color: var(--ambar-texto); }
  .sondaje--izq .sondaje__rotulo { left: auto; right: -2px; text-align: right; }

  .cartela { position: absolute; right: calc(clamp(10px, 1.6vw, 20px) + 18px); bottom: calc(clamp(10px, 1.6vw, 20px) + 16px); z-index: 2; display: grid; grid-template-columns: auto auto; align-items: end; gap: 6px 16px; font-family: var(--mono); font-size: .66rem; letter-spacing: .05em; color: var(--tenue); }
  .norte { grid-row: span 2; width: 34px; height: 34px; }
  .norte svg { width: 100%; height: 100%; transition: transform .1s linear; }
  .escala { display: grid; gap: 3px; }
  .escala__barra { display: grid; grid-template-columns: repeat(4, 22px); height: 5px; border: 1px solid var(--tinta-2); }
  .escala__barra i:nth-child(odd) { background: var(--tinta-2); }
  .escala__nums { display: flex; justify-content: space-between; }

  /* ================================================================ testigo de perforación (profundidad de lectura) */
  .testigo { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 20; display: grid; justify-items: end; gap: 8px; pointer-events: none; }
  .testigo__lectura { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: var(--tinta-2); background: var(--vidrio); border: 1px solid var(--curva); border-radius: 999px; padding: 3px 9px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .testigo__tubo { position: relative; width: 6px; height: 34vh; border-radius: 3px; background: var(--curva); overflow: hidden; }
  .testigo__relleno { position: absolute; inset: 0; transform-origin: top; transform: scaleY(0); background: repeating-linear-gradient(to bottom, var(--ambar) 0 12px, color-mix(in srgb, var(--ambar) 60%, var(--suelo)) 12px 15px); }
  .avance { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 20; transform-origin: left; transform: scaleX(0); background: var(--ambar); display: none; }

  /* ================================================================ estratos (secciones) */
  .estrato { position: relative; padding-block: clamp(84px, 11vw, 150px); }
  .estrato--banda { background: var(--suelo-2); }
  .corte { position: absolute; left: 0; right: 0; top: -1px; height: 26px; color: var(--curva); pointer-events: none; }
  .corte svg { width: 100%; height: 100%; display: block; }
  .cab { display: grid; gap: 16px; max-width: 64ch; margin-bottom: clamp(40px, 5.5vw, 72px); }
  .prof { font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ambar-texto); }
  .cab h2 { font-weight: 200; font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.02; letter-spacing: -.035em; }
  .cab p { color: var(--tinta-2); font-size: 1.08rem; max-width: 58ch; }

  /* hoy / con BP Minex */
  .contraste { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); }
  .contraste h3 { font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); padding-bottom: 14px; border-bottom: 1px solid var(--marco); }
  .contraste ul { list-style: none; margin: 0; padding: 0; }
  .contraste li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--curva); }
  .contraste .hoy li { color: var(--tenue); }
  .contraste .hoy li::before { content: "—"; font-family: var(--mono); color: var(--tenue); }
  .contraste .con li { color: var(--tinta); }
  .contraste .con li svg { width: 22px; height: 22px; margin-top: 2px; color: var(--ambar); }

  /* cuatro pasos: una secuencia real */
  .perfil { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: paso; position: relative; }
  .perfil::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 1px; background: var(--marco); }
  .perfil li { position: relative; padding: 52px 28px 0 0; display: grid; gap: 10px; align-content: start; }
  .perfil li::before { counter-increment: paso; content: "0" counter(paso); position: absolute; top: 0; left: 0; font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .08em; color: var(--tinta); background: var(--suelo); border: 1px solid var(--marco); border-radius: 999px; padding: 4px 11px; }
  .perfil li:nth-child(3)::before { border-color: var(--ambar); color: var(--ambar-texto); }
  .perfil h3 { font-weight: 400; font-size: 1.3rem; letter-spacing: -.01em; }
  .perfil p { color: var(--tinta-2); font-size: .98rem; }
  .perfil .ej { font-family: var(--mono); font-size: .75rem; color: var(--tenue); letter-spacing: .02em; }

  /* leyenda de áreas */
  .leyenda { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); column-gap: clamp(28px, 4vw, 56px); }
  .leyenda li { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--curva); }
  .leyenda svg { width: 46px; height: 46px; color: var(--tinta-2); transform: rotate(var(--giro, 0deg)); }
  .leyenda h3 { font-weight: 400; font-size: 1.05rem; }
  .leyenda p { color: var(--tenue); font-size: .92rem; margin-top: 3px; }

  /* rubros */
  .rubros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); }
  .rubro { display: grid; gap: 14px; align-content: start; }
  .rubro__corte { height: 96px; border-bottom: 1px solid var(--marco); color: var(--tinta-2); }
  .rubro__corte svg { width: 100%; height: 100%; display: block; overflow: visible; }
  .rubro h3 { font-weight: 400; font-size: 1.35rem; letter-spacing: -.01em; }
  .rubro ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; color: var(--tinta-2); font-size: .96rem; }
  .rubro li { padding-left: 18px; position: relative; }
  .rubro li::before { content: ""; position: absolute; left: 0; top: .78em; width: 8px; height: 1px; background: var(--ambar); }
  .niveles { margin-top: clamp(44px, 6vw, 72px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; color: var(--tinta-2); }
  .niveles span.pildora { font-size: .9rem; font-weight: 400; color: var(--tinta); border: 1px solid var(--marco); border-radius: 999px; padding: 7px 16px; background: var(--vidrio); }

  /* celular en 3D */
  .celular-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
  .escena { position: relative; display: grid; place-items: center; perspective: 1500px; padding-block: 20px 40px; }
  .celular {
    --rx: 8deg; --ry: -18deg;
    position: relative; width: min(310px, 74vw); aspect-ratio: 9 / 19.2; border-radius: 46px; padding: 11px;
    background: var(--telefono); box-shadow: var(--sombra), inset 0 0 0 1.5px rgba(255, 255, 255, .06);
    transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .7, .2, 1);
  }
  .pantalla { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: var(--pantalla); color: var(--pantalla-tinta); display: grid; grid-template-rows: auto auto 1fr; font-size: 12.5px; line-height: 1.4; }
  .pantalla__estado { display: flex; justify-content: space-between; padding: 14px 24px 6px; font-family: var(--mono); font-size: 11px; font-weight: 500; }
  .pantalla__cab { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px 12px; border-bottom: 1px solid var(--pantalla-linea); }
  .pantalla__cab b { font-weight: 500; font-size: 16px; letter-spacing: -.01em; }
  .contador { font-family: var(--mono); font-size: 11px; background: var(--ambar); color: #14100B; border-radius: 999px; padding: 1px 8px; }
  .bandeja { display: grid; gap: 10px; padding: 12px; align-content: start; }
  .tarjeta { background: color-mix(in srgb, var(--pantalla) 70%, var(--suelo-alto)); border: 1px solid var(--pantalla-linea); border-radius: 16px; padding: 11px 12px; display: grid; gap: 4px; }
  .tarjeta__tipo { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--pantalla-tenue); }
  .tarjeta__titulo { font-weight: 400; font-size: 13px; }
  .tarjeta__meta { color: var(--pantalla-tenue); font-size: 11px; }
  .tarjeta__meta b { color: var(--ambar-texto); font-weight: 500; }
  .tarjeta__botones { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 5px; }
  .tarjeta__botones span { text-align: center; border-radius: 999px; padding: 5px 0; font-size: 11px; border: 1px solid var(--pantalla-linea); }
  .tarjeta__botones span:last-child { background: var(--pantalla-tinta); color: var(--pantalla); border-color: transparent; }
  .recibo {
    position: absolute; right: max(-8%, -40px); bottom: 14%; width: min(230px, 56vw);
    transform: translateZ(90px) rotateY(-6deg); background: var(--vidrio); border: 1px solid var(--curva); border-radius: 18px; padding: 14px 16px;
    box-shadow: var(--sombra); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: grid; gap: 6px; font-size: 13px;
  }
  .recibo__firma { display: flex; align-items: center; gap: 8px; color: var(--tinta); }
  .recibo__firma svg { width: 18px; height: 18px; color: #4E7C1F; flex: none; }
  .recibo .mono { font-size: 11px; color: var(--tenue); }
  .funciones { list-style: none; margin: 0; padding: 0; display: grid; }
  .funciones li { padding: 20px 0; border-top: 1px solid var(--curva); display: grid; gap: 4px; }
  .funciones li:last-child { border-bottom: 1px solid var(--curva); }
  .funciones h3 { font-weight: 400; font-size: 1.15rem; }
  .funciones p { color: var(--tinta-2); font-size: .96rem; }

  /* datos */
  .datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px); }
  .datos div { display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 1px solid var(--marco); }
  .datos h3 { font-weight: 400; font-size: 1.1rem; }
  .datos p { color: var(--tinta-2); font-size: .95rem; }

  /* contacto */
  .contacto { position: relative; overflow: hidden; border-radius: clamp(24px, 3vw, 36px); border: 1px solid var(--curva); background: var(--suelo-alto); padding: clamp(36px, 6vw, 88px); display: grid; gap: 22px; justify-items: start; isolation: isolate; }
  .contacto svg.fondo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; color: var(--curva); }
  .contacto h2 { font-weight: 200; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; letter-spacing: -.04em; max-width: 16ch; }
  .contacto p { color: var(--tinta-2); max-width: 56ch; font-size: 1.08rem; }

  .pie { padding-block: 44px 56px; }
  .pie .ancho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; color: var(--tenue); font-size: .9rem; }
  .pie .mono { font-size: .75rem; letter-spacing: .06em; }
  .pie__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .pie__legal a { color: var(--tinta-2); text-decoration: none; font-size: .9rem; }
  .pie__legal a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }

  @media (max-width: 980px) {
    .perfil { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
    .perfil::before { display: none; }
    .datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rubros { grid-template-columns: 1fr; }
    .rubro { grid-template-columns: minmax(0, 220px) 1fr; column-gap: 28px; }
    .rubro__corte { grid-row: span 3; align-self: start; }
  }
  @media (max-width: 760px) {
    body { font-size: 16px; }
    .nav a:not(.nav__demo) { display: none; }
    .testigo { display: none; }
    .avance { display: block; }
    .mapa { height: auto; min-height: 700px; }
    .titular { bottom: 34px; }
    .cartela { top: calc(clamp(10px, 1.6vw, 20px) + 96px); bottom: auto; right: calc(clamp(10px, 1.6vw, 20px) + 14px); }
    .cartela > span, .cartela .escala { display: none; }
    .norte { width: 28px; height: 28px; }
    .marco .c2, .marco .c4, .marco .c6 { display: none; }
    .contraste { grid-template-columns: 1fr; }
    .celular-grid { grid-template-columns: 1fr; }
    .rubro { grid-template-columns: 1fr; }
    .rubro__corte { grid-row: auto; }
  }
  @media (max-width: 520px) {
    .perfil { grid-template-columns: 1fr; }
    .datos { grid-template-columns: 1fr; }
    .recibo { right: 0; }
    .acciones .boton { flex: 1 1 100%; }
  }
  /* imagen para compartir (og.jpg): scripts/dev/gen_landing.py abre la página con #compartir a 1200 × 630 */
  .compartir__url { display: none; }
  html.compartir body { overflow: hidden; }
  html.compartir .testigo, html.compartir .avance, html.compartir main, html.compartir footer, html.compartir .nav,
  html.compartir .acciones, html.compartir .titular p { display: none; }
  html.compartir { --gutter: 64px; }
  html.compartir .mapa { height: 630px; min-height: 0; }
  html.compartir .titular { bottom: 62px; }
  html.compartir .titular .ancho { gap: 18px; }
  html.compartir .titular h1 { font-size: 5.2rem; }
  html.compartir .compartir__url {
    display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 999px;
    font-family: var(--mono); font-size: 1rem; letter-spacing: .06em; color: var(--tinta);
    background: var(--vidrio); border: 1px solid var(--marco);
  }
  html.compartir .compartir__url i { width: 8px; height: 8px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 0 4px var(--ambar-suave); }

  /* ================================================================ láminas topográficas de las secciones
     scripts/dev/gen_topo_landing.py las genera; portada.js las pide cuando la sección se acerca y las dibuja al entrar */
  .estrato > .ancho { position: relative; z-index: 1; }
  .topo { position: absolute; top: 0; bottom: 0; right: 0; width: min(62%, 980px); pointer-events: none; z-index: 0; overflow: hidden;
          color: var(--tinta); opacity: 0; transition: opacity 1.6s ease;
          -webkit-mask-image: linear-gradient(to right, transparent 0, #000 42%), linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
          -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 42%), linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
          mask-composite: intersect; }
  .topo--izq { right: auto; left: 0;
          -webkit-mask-image: linear-gradient(to left, transparent 0, #000 42%), linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to left, transparent 0, #000 42%), linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%); }
  .topo--centro { width: 100%;
          -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 78%); }
  .topo.a-la-vista { opacity: 1; }
  .topo svg { display: block; width: 100%; height: 100%; }
  .topo path, .topo circle { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .tp-f path { stroke: currentColor; stroke-opacity: .085; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; }
  .tp-i path { stroke: currentColor; stroke-opacity: .19; stroke-width: 1.35; stroke-dasharray: 1; stroke-dashoffset: 1; }
  .tp-a path { stroke: var(--ambar); stroke-opacity: .38; stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
  .tp-a .tp-v { stroke-opacity: .9; stroke-width: 2.2; stroke-dasharray: .045 .955; stroke-dashoffset: 0; opacity: 0; }
  .tp-s path { stroke: var(--ambar); stroke-opacity: .42; stroke-width: 2; stroke-dasharray: 0 9; }
  .tp-c path { stroke: currentColor; stroke-opacity: .5; stroke-width: 1.4; }
  .tp-c circle { stroke: var(--ambar); stroke-opacity: .7; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; opacity: 0; }
  .tp-t { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; fill: currentColor; fill-opacity: .4; }
  .a-la-vista svg { animation: tp-deriva 70s ease-in-out infinite alternate; }
  .a-la-vista .tp-f path, .a-la-vista .tp-i path, .a-la-vista .tp-a path:not(.tp-v) {
    animation: tp-dibujar 2.8s cubic-bezier(.25, .7, .2, 1) forwards; animation-delay: calc(var(--d, 0) * 70ms); }
  .a-la-vista .tp-v { animation: tp-aparecer .9s ease 2.6s forwards, tp-viajar 11s linear 2.6s infinite; }
  .a-la-vista .tp-s path { animation: tp-marchar 1.8s linear infinite; }
  .a-la-vista .tp-c circle { animation: tp-pulso 3.4s ease-out 2.2s infinite; }
  .topo.quieta, .topo.quieta * { animation-play-state: paused !important; }
  @keyframes tp-dibujar { to { stroke-dashoffset: 0; } }
  @keyframes tp-aparecer { to { opacity: 1; } }
  @keyframes tp-viajar { to { stroke-dashoffset: -1; } }
  @keyframes tp-marchar { to { stroke-dashoffset: -18; } }
  @keyframes tp-pulso { 0% { opacity: .9; transform: scale(.35); } 100% { opacity: 0; transform: scale(2.6); } }
  @keyframes tp-deriva { to { transform: translate3d(-1.8%, -1.2%, 0) scale(1.035); } }
  @media (max-width: 760px) { .topo { width: 100%; opacity: 0; } .topo.a-la-vista { opacity: .55; } }

  /* rubros que trabajan con la minería (segunda fila) */
  .rubros__mas { margin: clamp(40px, 5vw, 64px) 0 clamp(20px, 2.4vw, 30px); font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ambar); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
    .topo path { stroke-dashoffset: 0 !important; }
    .tp-v, .tp-c circle { display: none; }
    .topo { opacity: 1; }
  }