/* =====================================================================
   ICT Minerales · estilos de la web (versión 3 · 2026-10-28)
   Marca: MARCA/Tablero de marca.html y MARCA/ELEMENTOS GRAFICOS (trama de triángulos).
   Distribución inspirada en webs mineras (MARCA/REFERENCIAS (webs de mineras)/Ideas para la web de ICT.html):
   portada a pantalla completa con el menú encima, accesos rápidos, frase grande, cápsulas, ficha "Sb 51",
   ruta del origen al puerto, sección con foto y trama, tarjeta sobre foto y tarjeta de acción.
   ESPACIOS PARA FOTOS: los elementos con data-foto-src muestran la foto si está en la lista FOTOS_LISTAS de
   sitio.js y, si no, la trama de la marca sobre color (ver img/fotos/LEEME_FOTOS.txt).
   ===================================================================== */
/* Letras guardadas en la propia web (2026-11-02): antes venían de Google Fonts y retrasaban casi un segundo
   la carga en celular. Solo el juego "latin" (cubre español e inglés). Licencia libre (SIL Open Font License). */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fuentes/jost-latin.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fuentes/source-sans-3-latin.woff2") format("woff2"); }
:root {
  --fondo: #F7F3F1;
  --fondo-2: #EFE8E6;
  --papel: #FFFFFF;
  --granate: #552E2C;
  --granate-hondo: #46251F;
  --noche: rgba(46, 24, 21, .9);
  --rojo: #A73A31;
  --rojo-2: #8E3029;
  --rojo-vivo: #CD4E41;
  --naranja: #DE6A33;
  --cobre: #B26C33;
  --dorado: #C0934F;
  --rosa: #DFD3D5;
  --texto: #3A2826;
  --texto-2: #4A3936;
  --gris: #614F4C;
  --claro: #E9DAD7;
  /* De apoyo, solo para lo que es en alianza: el opuesto del naranja, con la misma fuerza */
  --azul: #7DAED8;
  --azul-noche: #28405A;
  --azul-hondo: #1C2C3D;
  --linea: #E2D7D4;
  --max: 1180px;
  --radio: 6px;
  --cabecera: 78px;
  --titulos: "Jost", "Century Gothic", sans-serif;
  --cuerpo: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--cuerpo); font-size: 1.0625rem; line-height: 1.65; color: var(--texto); background: var(--fondo); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; }
h1, h2 { font-family: var(--titulos); font-weight: 700; letter-spacing: .015em; text-transform: uppercase; color: var(--granate); line-height: 1.12; }
h3 { font-size: 1.12rem; font-weight: 700; color: var(--granate); line-height: 1.3; }
.salto { position: absolute; left: -999px; top: 10px; z-index: 100; background: var(--granate); color: #fff; padding: 10px 16px; border-radius: var(--radio); }
.salto:focus { left: 10px; }
:focus-visible { outline: 2px solid var(--naranja); outline-offset: 3px; }

.antetitulo { display: flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rojo); }
.antetitulo::before { content: ""; width: 13px; height: 11px; flex: none; background: var(--naranja); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 700 1rem/1.2 var(--cuerpo); letter-spacing: .02em; padding: 15px 22px; border-radius: var(--radio); border: 1.5px solid transparent; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.boton svg { width: 18px; height: 18px; flex: none; }
.boton-rojo { background: var(--rojo); color: #fff; }
.boton-rojo:hover { background: var(--rojo-2); }
.boton-blanco { background: #fff; color: var(--granate); }
.boton-blanco:hover { background: var(--fondo); }
.boton-contorno { border-color: rgba(255, 255, 255, .55); color: #fff; }
.boton-contorno:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.boton-borde { border-color: var(--granate); color: var(--granate); }
.boton-borde:hover { background: var(--granate); color: #fff; }
.boton-claro { background: var(--fondo); color: var(--granate); }
.boton-claro:hover { background: #fff; }
.boton:disabled { opacity: .6; cursor: wait; }
.botones { display: flex; flex-wrap: wrap; gap: 12px; }

/* Acentos de trama (decorativos, detrás del contenido) */
.acento { position: absolute; z-index: 0; pointer-events: none; }
.acento img { width: 100%; height: auto; }
.seccion > .wrap, .nosotros-foto > .wrap { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- cabecera: transparente sobre la portada */
.cabecera { position: sticky; top: 0; z-index: 50; background: transparent; border-bottom: 1px solid transparent; transition: background .25s, border-color .25s, box-shadow .25s; }
.cabecera .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--cabecera); }
.marca img { height: 48px; width: auto; }
.marca .logo-oscuro { display: none; }
.menu { display: flex; align-items: center; gap: 26px; }
.menu a { text-decoration: none; font-weight: 600; font-size: .97rem; color: #fff; }
.menu a:hover { color: var(--naranja); }
.menu .idioma { font-size: .78rem; letter-spacing: .1em; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; padding: 5px 11px; }
.menu .boton { padding: 11px 18px; font-size: .92rem; color: #fff; }
.hamburguesa { display: none; background: none; border: 0; color: #fff; padding: 8px; cursor: pointer; }
.hamburguesa svg { width: 28px; height: 28px; }
.cabecera.solida { background: rgba(247, 243, 241, .97); border-bottom-color: var(--linea); box-shadow: 0 6px 20px rgba(85, 46, 44, .06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cabecera.solida .menu a { color: var(--granate); }
.cabecera.solida .menu a:hover { color: var(--rojo); }
.cabecera.solida .menu .boton { color: #fff; }
.cabecera.solida .menu .idioma { border-color: var(--linea); }
.cabecera.solida .hamburguesa { color: var(--granate); }
.cabecera.solida .logo-claro { display: none; }
.cabecera.solida .logo-oscuro { display: block; }

/* ---------------------------------------------------------------- espacios para fotos
   Sin foto: se ve el relleno de la marca (trama sobre color). Con foto: la foto con un velo oscuro. */
[data-foto-src] { position: relative; background-size: cover; background-position: center; }
.revision [data-foto]:not(.con-foto)::after { content: "Foto pendiente · " attr(data-foto); position: absolute; left: 16px; bottom: 14px; z-index: 6; max-width: calc(100% - 32px); padding: 4px 8px; border-radius: 3px; background: rgba(222, 106, 51, .95); color: #fff; font: 700 .64rem/1.35 var(--cuerpo); letter-spacing: .04em; text-transform: uppercase; pointer-events: none; }

/* ---------------------------------------------------------------- portada a pantalla completa */
/* 2026-11-02 (Matias): portada limpia, solo la foto, a pantalla completa. Las tarjetas de accesos van debajo
   (no encima), así no se cortan en ninguna pantalla. */
/* -1px: la cabecera tiene un borde de 1px (transparente arriba); sin esto quedaba una línea clara arriba */
.portada { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; margin-top: calc(-1 * var(--cabecera) - 1px); padding-top: calc(var(--cabecera) + 1px); color: var(--claro);
  background-color: var(--granate);
  background-image: radial-gradient(110% 95% at 88% 8%, #6A3A31 0%, var(--granate) 46%, var(--granate-hondo) 100%); }
.portada::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06;
  background: url("img/curvas-de-nivel.svg") center / cover no-repeat; filter: brightness(2.6) saturate(.25); }
.portada.con-foto { background-image: linear-gradient(90deg, rgba(46, 24, 21, .94) 0%, rgba(46, 24, 21, .74) 48%, rgba(46, 24, 21, .38) 100%), var(--foto); }
.portada.con-foto::before { display: none; }
/* Encuadre (2026-11-02, regla de tercios de Elam): la laguna, lo único con color, cae en el tercio derecho.
   Con "center", en el celular solo se veía roca gris. Si cambia la foto de portada, revisar este 70 %. */
.portada.con-foto { background-position: 70% center; }
/* en el celular va portada-movil.webp, un recorte que ya está centrado en esa laguna (2026-11-02) */
.portada.con-foto.foto-movil { background-position: center; }
.revision .portada[data-foto]:not(.con-foto)::after { left: auto; right: 16px; bottom: auto; top: calc(var(--cabecera) + 14px); }
.portada .wrap { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding-top: 40px; padding-bottom: 104px; }
.portada .antetitulo { color: var(--dorado); }
.portada h1 { color: #fff; font-size: clamp(2.05rem, 3.9vw, 3.15rem); margin: 20px 0 22px; }
.portada .entrada { font-size: 1.18rem; color: var(--claro); max-width: 33em; margin-bottom: 34px; }
.trama-portada img { width: 122%; max-width: 760px; margin-left: auto; margin-right: -14%; }
/* La trama de triángulos ya no va sobre la foto (portada limpia, 2026-11-02); sigue en el logo y en otras secciones */
.portada .trama-portada { display: none; }
/* Laptops de poca altura: menos aire, para que el título y los botones entren en la primera pantalla */
@media (min-width: 981px) and (max-height: 760px) {
  .portada .wrap { padding-top: 12px; padding-bottom: 80px; }
  .portada h1 { margin: 14px 0 16px; }
  .portada .entrada { margin-bottom: 24px; }
}
@media (min-width: 981px) and (max-height: 640px) {
  .portada h1 { font-size: clamp(1.9rem, 3.4vw, 2.4rem); }
  .portada .entrada { font-size: 1.05rem; }
}

/* Accesos rápidos (debajo de la portada) */
.accesos { position: relative; z-index: 3; padding-top: 36px; }
.accesos .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.acceso { display: grid; gap: 4px; padding: 20px 20px 18px; border-radius: var(--radio); border-bottom: 5px solid var(--naranja); background: var(--papel); text-decoration: none; box-shadow: 0 16px 36px rgba(46, 24, 21, .16); transition: transform .2s, box-shadow .2s; }
.acceso:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(46, 24, 21, .2); }
.acceso:nth-child(2) { border-bottom-color: var(--dorado); }
.acceso:nth-child(3) { border-bottom-color: var(--cobre); }
.acceso:nth-child(4) { border-bottom-color: var(--rojo); }
.acceso small { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.acceso strong { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--titulos); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 1.02rem; color: var(--granate); }
.acceso strong svg { width: 18px; height: 18px; flex: none; color: var(--rojo); }
.acceso span { font-size: .9rem; color: var(--gris); }

/* Frase grande */
.frase { padding: 96px 0 36px; text-align: center; }
.frase .grande { max-width: 920px; margin: 0 auto; font-family: var(--titulos); font-weight: 600; font-size: clamp(1.55rem, 3.1vw, 2.4rem); line-height: 1.3; color: var(--granate); text-wrap: balance; }
.frase .grande em { font-style: normal; color: var(--rojo); }
.frase .apoyo { max-width: 660px; margin: 20px auto 0; font-size: 1.08rem; color: var(--texto-2); }

/* Tres puertas en cápsula, una por público (con foto o con trama) */
.capsulas { padding: 34px 0 96px; }
.capsulas .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.capsula { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 290px; padding: 40px 48px 58px; border-radius: 999px; color: #fff; text-decoration: none; background-color: var(--granate); transition: transform .25s, box-shadow .25s; }
.capsula:hover { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(46, 24, 21, .22); }
.capsula::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55; background: url("img/trama-montana.svg") right -30px bottom -10px / 72% auto no-repeat; }
.capsula-productores { background-color: var(--rojo); }
.capsula-productores::before { background: url("img/trama-degradada.svg") right -40px center / 95% auto no-repeat; opacity: .45; }
.capsula-inversionistas { background-color: var(--cobre); background-image: linear-gradient(0deg, rgba(46, 24, 21, .6) 0%, rgba(46, 24, 21, 0) 80%); }
.capsula-inversionistas::before { background: url("img/trama-luna.svg") right 36px top 28px / 30% auto no-repeat; opacity: .55; }
.capsula.con-foto { background-image: linear-gradient(0deg, rgba(46, 24, 21, .88) 0%, rgba(46, 24, 21, .25) 75%), var(--foto); }
.capsula.con-foto::before { opacity: .3; }
.capsula small { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rosa); }
.capsula strong { display: flex; align-items: center; gap: 12px; font-family: var(--titulos); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.2; }
.capsula strong svg { width: 24px; height: 24px; flex: none; color: var(--naranja); }
.capsula span { max-width: 26em; font-size: .98rem; color: var(--claro); }
.revision .capsula[data-foto]:not(.con-foto)::after { left: 50%; bottom: auto; top: 24px; max-width: 62%; transform: translateX(-50%); text-align: center; }

/* ---------------------------------------------------------------- secciones */
.seccion { position: relative; overflow: hidden; padding: 100px 0; }
.seccion.alterna { background: var(--fondo-2); }
.encabezado { max-width: 760px; margin-bottom: 50px; }
.encabezado.centrado { margin-left: auto; margin-right: auto; text-align: center; }
.encabezado.centrado .antetitulo { justify-content: center; }
.encabezado h2, .seccion h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 16px 0 14px; }
/* Línea de cumbres bajo los títulos (sale de las montañas del logo) */
.encabezado h2::after { content: ""; display: block; width: 220px; height: 22px; margin-top: 14px; background: url("img/cumbres.svg") left bottom / 220px 22px no-repeat; }
.encabezado.centrado h2::after { margin-left: auto; margin-right: auto; background-image: url("img/cumbres-centro.svg"); }
.seccion.oscura .encabezado h2::after { background-image: url("img/cumbres-claro.svg"); }
.encabezado p, .texto-seccion { font-size: 1.1rem; color: var(--texto-2); }
.dos-columnas { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }

/* Minerales: ficha estilo tabla periódica */
.minerales .wrap.principal { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: center; }
.elemento { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto auto; width: 100%; max-width: 380px; aspect-ratio: 1; padding: 26px 30px; border-radius: 10px; color: #fff; box-shadow: 0 24px 50px rgba(46, 24, 21, .22);
  background-color: var(--granate); background-image: radial-gradient(120% 100% at 85% 10%, #6A3A31 0%, var(--granate) 55%, var(--granate-hondo) 100%); }
.elemento::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background: url("img/trama-degradada.svg") right -120px bottom -40px / 150% auto no-repeat; }
.elemento.con-foto { background-image: linear-gradient(180deg, rgba(46, 24, 21, .55), rgba(46, 24, 21, .9)), var(--foto); }
.revision .elemento[data-foto]:not(.con-foto)::after { left: auto; right: 14px; bottom: auto; top: 14px; max-width: 62%; }
.elemento .numero { font-family: var(--titulos); font-weight: 700; font-size: 1.5rem; }
.elemento .simbolo { align-self: center; font-family: var(--titulos); font-weight: 700; font-size: clamp(6rem, 12vw, 9.5rem); line-height: 1; letter-spacing: -.02em; }
.elemento .nombre { font-family: var(--titulos); font-weight: 700; text-transform: uppercase; letter-spacing: .22em; font-size: 1.15rem; }
.elemento .masa { font-size: .92rem; color: var(--claro); }
/* Ficha general (todos los minerales): el ícono del mineral en lugar del símbolo químico */
.elemento-mineral .simbolo { display: flex; align-items: center; }
.elemento-mineral .simbolo svg { width: clamp(6.5rem, 12vw, 8.5rem); height: auto; }
.datos { display: grid; grid-template-columns: auto 1fr; margin: 22px 0 28px; border-top: 2px solid var(--granate); }
.datos dt, .datos dd { padding: 11px 0; border-bottom: 1px dashed var(--linea); }
.datos dt { padding-right: 22px; padding-top: 13px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.datos dd { font-weight: 600; color: var(--granate); }
.usos-wrap { margin-top: 72px; }
.usos-titulo { margin-bottom: 18px; text-align: center; font-family: var(--titulos); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--granate); }
.usos { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.usos li { display: grid; justify-items: center; gap: 10px; padding: 22px 12px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); text-align: center; }
.usos svg { width: 40px; height: 40px; color: var(--rojo); }
.usos span { font-weight: 600; font-size: .95rem; color: var(--granate); }

/* Del origen al puerto: una línea con triángulos que une los pasos */
.ruta { position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.ruta::before { content: ""; position: absolute; left: 12%; right: 12%; top: 25px; height: 2px; background: repeating-linear-gradient(90deg, var(--dorado) 0 8px, transparent 8px 16px); }
.parada { position: relative; display: grid; justify-items: center; gap: 14px; text-align: center; }
/* Fases de la luna (sistema de marca): cada paso llena un poco más la luna, hasta la llena */
.fase { display: block; width: 52px; height: 52px; }
.fase svg { display: block; width: 100%; height: 100%; }
.parada h3 { margin-bottom: 6px; }
.parada p { font-size: .98rem; color: var(--gris); }

/* Marcadores en triángulo (viñetas del kit) */
.paso-num, .prueba .prueba-num { display: grid; place-items: end center; color: #fff; font-family: var(--titulos); font-weight: 700; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--naranja); }
.paso-num { width: 58px; height: 50px; padding-bottom: 5px; font-size: 1.2rem; line-height: 1; }
.paso:nth-child(2) .paso-num, .parada:nth-child(2) .paso-num, .prueba:nth-child(2) .prueba-num { background: var(--cobre); }
.paso:nth-child(3) .paso-num, .parada:nth-child(3) .paso-num, .prueba:nth-child(3) .prueba-num { background: var(--rojo-vivo); }
.paso:nth-child(4) .paso-num, .parada:nth-child(4) .paso-num, .prueba:nth-child(4) .prueba-num { background: var(--rojo); }
.pasos { list-style: none; }
.paso { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 18px; padding-bottom: 28px; }
.paso:not(:last-child)::before { content: ""; position: absolute; left: 28px; top: 54px; bottom: 2px; width: 2px; background: repeating-linear-gradient(180deg, var(--dorado) 0 6px, transparent 6px 12px); }
.paso h3 { margin: 12px 0 4px; }
.paso p { color: var(--gris); }

/* Compradores */
.acento-compradores { top: 36px; right: -60px; width: 460px; opacity: .2; }
.recibe { list-style: none; display: grid; gap: 14px; margin-top: 26px; }
.recibe li { position: relative; padding-left: 26px; color: var(--texto-2); }
.recibe li::before { content: ""; position: absolute; left: 0; top: 8px; width: 13px; height: 11px; background: var(--naranja); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.recibe b { display: block; color: var(--granate); }
.recibe.con-iconos li { padding-left: 42px; }
.recibe.con-iconos li::before { display: none; }
.recibe.con-iconos li svg { position: absolute; left: 0; top: 1px; width: 28px; height: 28px; color: var(--rojo); }
.reservado { background: var(--papel); border: 1px solid var(--linea); border-left: 4px solid var(--dorado); border-radius: var(--radio); padding: 28px 30px; }
.reservado .reservado-titulo { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-family: var(--titulos); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 1.1rem; color: var(--granate); }
.reservado-titulo svg { width: 22px; height: 22px; flex: none; color: var(--dorado); }
.reservado > p { color: var(--gris); }
.reservado ul { list-style: none; display: grid; gap: 8px; margin: 16px 0 24px; }
.reservado li { display: flex; gap: 12px; font-weight: 600; color: var(--granate); }
.reservado li::before { content: ""; width: 11px; height: 10px; margin-top: 8px; flex: none; background: var(--naranja); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* Productores: foto a lo ancho (o color), trama a la izquierda y una línea curva fina */
.seccion.oscura { background-color: var(--granate); color: var(--claro); }
.seccion.oscura::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06;
  background: url("img/curvas-de-nivel.svg") center / cover no-repeat; filter: brightness(2.6) saturate(.25); }
.seccion.oscura.con-foto { background-image: linear-gradient(90deg, rgba(46, 24, 21, .95) 0%, rgba(46, 24, 21, .82) 52%, rgba(46, 24, 21, .55) 100%), var(--foto); }
.seccion.oscura.con-foto::before { display: none; }
.acento-productores { left: -60px; bottom: -8px; width: 560px; opacity: .3; }
.curva { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.curva path { fill: none; stroke: var(--naranja); stroke-width: 1.5; opacity: .5; vector-effect: non-scaling-stroke; }
.seccion.oscura h2, .seccion.oscura h3 { color: #fff; }
.seccion.oscura .antetitulo { color: var(--rosa); }
.seccion.oscura .encabezado p, .seccion.oscura .paso p { color: var(--claro); }
.requisitos { background: rgba(70, 37, 31, .78); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radio); padding: 28px 30px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.requisitos h3 { margin-bottom: 14px; font-family: var(--titulos); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 1.1rem; }
.requisitos ul { list-style: none; display: grid; gap: 12px; margin-bottom: 26px; }
.requisitos li { display: flex; gap: 12px; }
.requisitos li svg { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--naranja); }
.horario { margin-top: 14px; font-size: .92rem; color: var(--claro); }

/* Lo que puede verificar: ficha de la empresa y 4 pruebas */
.verificar { display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: start; }
.ficha { position: relative; background: var(--papel); border: 1px solid var(--linea); border-top: 4px solid var(--granate); border-radius: var(--radio); box-shadow: 0 18px 40px rgba(85, 46, 44, .08); }
/* El sello de la empresa sobre la ficha, como un documento sellado */
.ficha-sello { position: absolute; top: -34px; right: -26px; width: 112px; height: 112px; transform: rotate(-12deg); opacity: .9; pointer-events: none; }
.ficha-cuerpo { padding: 24px 28px 18px; }
.ficha-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--granate); }
.ficha-titulo span:first-child { font-family: var(--titulos); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 1.02rem; color: var(--granate); }
.ficha-titulo span:last-child { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.ficha dl { display: grid; grid-template-columns: auto 1fr; }
.ficha dt, .ficha dd { padding: 11px 0; border-bottom: 1px dashed var(--linea); }
.ficha dt { padding-top: 13px; padding-right: 18px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.ficha dd { font-weight: 600; color: var(--granate); }
.ficha dl > :nth-last-child(-n+2) { border-bottom: 0; }
.pruebas { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 32px; }
/* 1.2rem (no 1.1): con letra blanca sobre cobre o rojo, desde ese tamaño se lee bien (contraste para texto grande) */
.prueba .prueba-num { width: 60px; height: 52px; padding-bottom: 6px; font-size: 1.2rem; line-height: 1; }
.prueba h3 { margin: 14px 0 6px; }
.prueba p { font-size: .98rem; color: var(--gris); }

/* Nosotros: tarjeta blanca sobre una foto (o sobre color con trama) */
.nosotros-foto { position: relative; overflow: hidden; padding: 110px 0; background-color: var(--granate-hondo);
  background-image: radial-gradient(100% 120% at 15% 90%, #6A3A31 0%, var(--granate) 50%, var(--granate-hondo) 100%); }
.nosotros-foto::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06;
  background: url("img/curvas-de-nivel.svg") center / cover no-repeat; filter: brightness(2.6) saturate(.25); }
.nosotros-foto.con-foto { background-image: linear-gradient(90deg, rgba(46, 24, 21, .25), rgba(46, 24, 21, .6)), var(--foto); }
.nosotros-foto.con-foto::before { display: none; }
.acento-nosotros { left: 4%; top: 50%; width: 360px; transform: translateY(-50%); opacity: .55; }
.tarjeta-nosotros { position: relative; z-index: 1; max-width: 640px; margin-left: auto; padding: 40px 44px; border-radius: var(--radio); background: var(--papel); box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }
.tarjeta-nosotros .logo-tarjeta { width: 110px; height: auto; margin-bottom: 20px; }
.tarjeta-nosotros h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 14px 0 10px; }
.tarjeta-nosotros p { margin-top: 14px; color: var(--gris); }
.tarjeta-nosotros p.destacado { padding-left: 16px; border-left: 3px solid var(--naranja); font-weight: 600; font-size: 1.18rem; line-height: 1.45; color: var(--granate); }

/* Tarjeta de acción */
.accion { padding: 96px 0; }
.tarjeta-accion { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1.25fr .75fr; gap: 30px; align-items: center; padding: 54px 56px; border-radius: 22px; background: var(--rojo); color: #fff; box-shadow: 0 24px 50px rgba(167, 58, 49, .25); }
.tarjeta-accion::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .4; background: url("img/trama-degradada.svg") right -60px center / 70% auto no-repeat; }
.tarjeta-accion h2 { color: #fff; font-size: clamp(1.45rem, 2.7vw, 2.05rem); margin-bottom: 10px; }
.tarjeta-accion p { color: #F8E4E0; font-size: 1.08rem; }
.tarjeta-accion .botones { justify-content: flex-end; }

/* Contacto */
.contacto { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.contacto-intro { font-size: 1.08rem; color: var(--texto-2); }
.canales { list-style: none; margin-top: 28px; }
.canales li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.canal-icono { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--linea); background: var(--papel); }
.canal-icono svg { width: 19px; height: 19px; color: var(--rojo); }
.canales small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.canales a, .canales b { font-weight: 600; color: var(--granate); text-decoration: none; word-break: break-word; }
.canales a:hover { color: var(--rojo); text-decoration: underline; }
.contacto-figura { position: relative; }
.contacto-figura::before { content: ""; position: absolute; right: -40px; top: -40px; width: 70%; height: 60%; background: url("img/trama-degradada.svg") right top / 760px auto no-repeat; opacity: .55; }
.formulario { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 32px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: 0 18px 40px rgba(85, 46, 44, .08); }
.formulario fieldset { grid-column: 1 / -1; border: 0; min-width: 0; }
/* Formulario según quién escribe (2026-11-02): cada perfil ve solo sus campos; el productor ve primero WhatsApp,
   su canal de siempre (Eyal/Fogg: cuanto más fácil, más probable que lo haga). */
.via-whatsapp { grid-column: 1 / -1; padding: 18px; border-radius: var(--radio); background: var(--fondo-2); }
.via-whatsapp p { margin: 0 0 12px; font-weight: 600; color: var(--granate); line-height: 1.4; }
.via-whatsapp small { display: block; margin-top: 14px; color: var(--texto-2); }
.formulario legend { margin-bottom: 12px; font-family: var(--titulos); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 1.1rem; color: var(--granate); }
.tipos { display: flex; flex-wrap: wrap; gap: 8px; }
.tipos label { position: relative; cursor: pointer; }
.tipos input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tipos span { display: inline-block; padding: 9px 16px; border: 1.5px solid var(--linea); border-radius: 999px; background: var(--fondo); font-weight: 600; font-size: .95rem; color: var(--granate); transition: background .15s, color .15s, border-color .15s; }
.tipos input:checked + span { background: var(--granate); border-color: var(--granate); color: #fff; }
.tipos input:focus-visible + span { outline: 2px solid var(--rojo); outline-offset: 2px; }
.campo { display: grid; gap: 6px; align-content: start; }
.campo.completo { grid-column: 1 / -1; }
.campo label { font-size: .88rem; font-weight: 600; color: var(--granate); }
.campo label span { font-weight: 400; color: var(--gris); }
.campo input, .campo textarea { width: 100%; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--texto); background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio); }
.campo textarea { min-height: 120px; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--rojo); outline-offset: 1px; background: #fff; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario-pie { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 4px; }
.formulario-pie small { max-width: 30em; font-size: .86rem; color: var(--gris); }
.estado { grid-column: 1 / -1; min-height: 1.4em; font-weight: 600; color: var(--granate); }
.estado.ok { color: #2F6B3A; }
.estado.error { color: var(--rojo); }

/* ---------------------------------------------------------------- Proyectos (en esta misma página)
   Abiertos, justo después de Productores: los tres públicos seguidos. Si la gerencia no los aprueba, se borra el
   bloque PROYECTOS del HTML (ver LEEME_WEB.txt); estos estilos pueden quedarse. */
.acento-proyectos { right: -70px; top: 40px; width: 460px; opacity: .2; }
.bloque-proyectos { margin-top: 96px; }
.proyectos-pie { justify-content: center; margin-top: 64px; }
.nota-revision { margin-top: 14px; padding: 8px 12px; border-left: 3px solid var(--naranja); background: #FFF7F1; font-size: .92rem; color: #6B2E12; }
.proyectos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.proyecto { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 400px; border-radius: 18px; color: #fff; box-shadow: 0 24px 50px rgba(46, 24, 21, .18);
  background-color: var(--granate); background-image: radial-gradient(120% 100% at 90% 0%, #6A3A31 0%, var(--granate) 50%, var(--granate-hondo) 100%); }
/* Trama de fondo: el nombre también se ve. Creciente (100 % ICT) lleva la luna del logo, en naranja;
   Cumbre (en alianza), las montañas, en azul. */
.proyecto::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .45; background: url("img/trama-luna.svg") right 30px top 26px / 38% auto no-repeat; }
.proyecto.alianza::before { opacity: .4; background: url("img/trama-montana-azul.svg") right -40px bottom 90px / 92% auto no-repeat; }
.proyecto.alianza:nth-child(2n)::before { background-position: left -60px bottom 90px; }
.proyecto.con-foto { background-image: linear-gradient(180deg, rgba(46, 24, 21, .3) 0%, rgba(46, 24, 21, .93) 68%), var(--foto); }
.proyecto.con-foto::before { opacity: .22; }
.proyecto .cuerpo { position: relative; display: grid; gap: 14px; padding: 30px 32px 28px; }
.proyecto-cabeza small { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--dorado); }
.proyecto h3 { font-family: var(--titulos); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.4rem, 2.4vw, 1.8rem); color: #fff; line-height: 1.1; }
.proyecto dl { display: grid; grid-template-columns: repeat(4, max-content); justify-content: space-between; gap: 10px 24px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .2); }
.proyecto dt { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rosa); }
.proyecto dd { font-weight: 600; color: #fff; }
/* los minerales en palabras (2026-11-02): ocupa todo el ancho, como primer dato de la tarjeta */
.proyecto dl .dl-minerales { grid-column: 1 / -1; }
.proyecto .enlace { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding-bottom: 3px; border-bottom: 1.5px solid var(--naranja); color: #fff; font-weight: 700; text-decoration: none; }
.proyecto .enlace svg { width: 18px; height: 18px; color: var(--naranja); }
.proyecto .enlace:hover { color: var(--rosa); }
/* El mineral de cada proyecto, al lado del nombre: una celda de la tabla periódica que se reconoce al instante.
   Es lo de más contraste de la tarjeta (el foco) y su símbolo mide ~1,6 veces el título (proporción áurea).
   100 % ICT = naranja sobre granate (la luna del logo). En alianza = azul sobre azul noche (color de apoyo): otro
   color con la misma fuerza. La claridad se lee como «más y menos»; el color, como «otro tipo». */
.proyecto-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.proyecto-cabeza > div { display: grid; gap: 6px; }
.proyecto-cabeza small { color: #E8803F; }
.mineral-ficha { position: relative; flex: none; display: grid; place-content: center; justify-items: center; width: 5.5rem; aspect-ratio: 1; border-radius: 10px;
  background: #E8803F; color: var(--granate-hondo); box-shadow: 0 10px 22px rgba(0, 0, 0, .28); }
.mf-num { position: absolute; top: 6px; left: 8px; font-size: .68rem; font-weight: 700; line-height: 1; }
.mf-simbolo { font-family: var(--titulos); font-weight: 700; font-size: 2.8rem; line-height: 1; }
.mf-nombre { margin-top: 5px; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.1; text-align: center; }
.proyecto.alianza { background-color: var(--azul-noche); background-image: radial-gradient(120% 100% at 90% 0%, #3E5B78 0%, var(--azul-noche) 50%, var(--azul-hondo) 100%); box-shadow: 0 24px 50px rgba(28, 44, 61, .2); }
.proyecto.alianza.con-foto { background-image: linear-gradient(180deg, rgba(28, 44, 61, .3) 0%, rgba(28, 44, 61, .93) 68%), var(--foto); }
.proyecto.alianza .mineral-ficha { background: var(--azul); color: var(--azul-hondo); }
.proyecto.alianza .proyecto-cabeza small { color: var(--azul); }
.proyecto.alianza .enlace { border-bottom-color: var(--azul); }
.proyecto.alianza .enlace svg { color: var(--azul); }
.grupo-proyectos + .grupo-proyectos { margin-top: 56px; }
.grupo-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 20px; }
.grupo-chip { padding: 6px 14px; border-radius: 999px; background: #E8803F; color: var(--granate-hondo); font-family: var(--titulos); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.grupo-alianza .grupo-chip { background: var(--azul); color: var(--azul-hondo); }
.grupo-cabeza::after { content: ""; flex: 1; min-width: 40px; height: 2px; border-radius: 2px; background: #E8803F; opacity: .5; }
.grupo-alianza .grupo-cabeza::after { background: var(--azul); opacity: .6; }
/* Lo que aún no está confirmado dice «Próximamente», con borde punteado: se lee como «en camino», no como un error */
.mineral-ficha.pendiente { width: auto; min-width: 5.5rem; padding: 0 10px; background: transparent; box-shadow: none; border: 1.5px dashed currentColor; color: #E8803F; }
/* Minerales de cada proyecto (2026-11-02): celdas como la tabla periódica, con el rótulo «Potencial» porque todavía
   no hay análisis (la web no da por comprobado lo que no lo está). n1 a n4 = cuántos minerales lleva. */
.mineral-ficha.varios { width: auto; aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, 2.75rem); gap: 5px; place-content: start; justify-items: stretch; background: none; box-shadow: none; }
.mineral-ficha.varios.n3 { grid-template-columns: repeat(3, 2.75rem); }
.mineral-ficha.varios .mf { position: relative; display: grid; place-items: center; height: 2.75rem; border-radius: 7px; background: #E8803F; color: var(--granate-hondo); font-family: var(--titulos); font-weight: 700; font-size: 1.35rem; line-height: 1; box-shadow: 0 6px 14px rgba(0, 0, 0, .25); }
.mineral-ficha.varios .mf small { position: absolute; top: 4px; left: 5px; font: 700 .52rem/1 var(--cuerpo); }
/* más específico que las reglas de la celda antigua (.proyecto.alianza .mineral-ficha) y de los rótulos de la
   tarjeta (.proyecto-cabeza small): sin esto, en alianza salía un recuadro azul detrás y los números no se veían */
.proyecto .cuerpo .mineral-ficha.varios { background: none; box-shadow: none; }
.proyecto .cuerpo .mineral-ficha.varios .mf small { color: inherit; opacity: .75; letter-spacing: 0; text-transform: none; }
.mineral-ficha.varios.n1 .mf { grid-column: 1 / -1; height: 5.5rem; font-size: 2.6rem; }
.mf-rotulo { grid-column: 1 / -1; margin-top: 3px; text-align: center; font: 700 .58rem/1 var(--cuerpo); letter-spacing: .16em; text-transform: uppercase; color: #E8803F; }
.proyecto.alianza .mineral-ficha.varios .mf { background: var(--azul); color: var(--azul-hondo); }
.proyecto.alianza .mf-rotulo { color: var(--azul); }
.mf-pronto { font-size: .74rem; font-weight: 700; line-height: 1.15; text-align: center; white-space: nowrap; }
.proyecto.pronto { grid-column: 1 / -1; min-height: 240px; }
.pronto-texto { max-width: 34em; color: var(--claro); }
[hidden] { display: none !important; }
/* Las 3 concesiones de ICT: en pantallas anchas van en una fila */
@media (min-width: 1100px) {
  .proyectos-grid.tres { grid-template-columns: repeat(3, 1fr); }
  .proyectos-grid.tres .proyecto .cuerpo { padding: 26px 24px 24px; }
  .proyectos-grid.tres .proyecto h3 { font-size: 1.4rem; }
  .proyectos-grid.tres .proyecto dl { grid-template-columns: repeat(2, 1fr); justify-content: stretch; }
  /* si la última tarjeta queda sola en su fila (las 7 en alianza), va al centro; no con una región elegida del
     mapa (.filtrado): ahí las ocultas igual cuentan para nth-child y la tarjeta saltaba a otra fila */
  .proyectos-grid.tres:not(.filtrado) > .proyecto:last-child:nth-child(3n+1) { grid-column: 2; }
}
@media (min-width: 981px) and (max-width: 1099px) {
  .proyectos-grid:not(.filtrado) > .proyecto:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 11px); }
}
.revision .proyecto[data-foto]:not(.con-foto)::after { left: 18px; bottom: auto; top: 18px; max-width: 58%; }
.solo-revision { display: none; }
.revision .solo-revision { display: block; }
.falta-dato { font-size: .82rem; font-weight: 700; color: #FFD9C4; }
.formas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.formas.dos { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
.forma { padding: 28px 26px; border: 1px solid var(--linea); border-top: 4px solid var(--naranja); border-radius: var(--radio); background: var(--papel); }
.forma:nth-child(2) { border-top-color: var(--dorado); }
.forma:nth-child(3) { border-top-color: var(--rojo); }
.forma svg { width: 34px; height: 34px; margin-bottom: 14px; color: var(--rojo); }
.forma h3 { margin-bottom: 8px; font-family: var(--titulos); text-transform: uppercase; letter-spacing: .02em; }
.forma p { font-size: .98rem; color: var(--gris); }
.nota-legal { margin-top: 20px; font-size: .9rem; color: var(--gris); }
.preguntas-gerencia { margin-top: 64px; }
.preguntas-gerencia .caja { padding: 30px 34px; border: 2px dashed var(--naranja); border-radius: 14px; background: #FFF7F1; }
.preguntas-gerencia h2 { font-size: 1.3rem; margin-bottom: 6px; }
.preguntas-gerencia ol { margin: 14px 0 0 20px; display: grid; gap: 6px; color: var(--texto); }

/* ---------------------------------------------------------------- pie */
.pie { position: relative; overflow: hidden; background: var(--granate-hondo); color: var(--claro); }
.acento-pie { right: 3%; top: -30px; width: 230px; opacity: .3; }
.pie-columnas { position: relative; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding-top: 56px; padding-bottom: 40px; }
.pie-columnas img { height: 46px; width: auto; margin-bottom: 16px; }
.pie-titulo { margin-bottom: 12px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rosa); }
.pie ul { list-style: none; display: grid; gap: 8px; }
.pie a { color: #F4EAE8; text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie-correos li { display: grid; gap: 1px; }
.pie-correos span { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rosa); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pie-legal { position: relative; border-top: 1px solid rgba(255, 255, 255, .14); }
.pie-legal .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 18px; padding-bottom: 22px; font-size: .86rem; }

/* ---------------------------------------------------------------- aparecer al bajar (sutil) */
.js [data-aparece] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js [data-aparece].visible { opacity: 1; transform: none; }
/* La portada entra sola al cargar (sin esperar al código): así el título se ve antes en celular */
.entra { animation: entra .7s ease both; }
@keyframes entra { from { opacity: 0; transform: translateY(18px); } }

/* ---------------------------------------------------------------- modo revisión (borrador)
   Con class="revision" en <html>: lo que falta confirmar se marca en naranja y los espacios de foto dicen qué
   foto va. Al publicar la versión final: quitar class="revision" (ver LEEME_WEB.txt). */
.aviso-revision { display: none; }
.revision .aviso-revision { display: block; padding: 8px 16px; background: #FBE7D9; border-bottom: 1px solid #F1C3A3; text-align: center; font-size: .9rem; color: #6B2E12; }
.revision [data-confirmar] { background: linear-gradient(transparent 62%, rgba(222, 106, 51, .28) 62%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.revision [data-confirmar]::after { content: attr(data-confirmar); display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 3px; background: var(--naranja); color: #fff; font: 700 .64rem/1.3 var(--cuerpo); letter-spacing: .04em; text-transform: uppercase; vertical-align: .2em; white-space: nowrap; }

/* ---------------------------------------------------------------- tablet y celular */
@media (max-width: 980px) {
  .portada .wrap, .dos-columnas, .contacto, .verificar, .minerales .wrap.principal, .tarjeta-accion { grid-template-columns: 1fr; gap: 40px; }
  .portada .wrap { padding-top: 36px; }
  .trama-portada img { width: 100%; max-width: 520px; margin: 0 auto; }
  .accesos .wrap { grid-template-columns: 1fr 1fr; }
  .capsulas .wrap { grid-template-columns: 1fr; }
  .capsula { border-radius: 28px; min-height: 230px; padding: 30px 32px; }
  .revision .capsula[data-foto]:not(.con-foto)::after { left: 16px; top: 16px; max-width: calc(100% - 32px); transform: none; text-align: left; }
  .elemento { max-width: 340px; margin: 0 auto; }
  .usos { grid-template-columns: 1fr 1fr; }
  .ruta { grid-template-columns: 1fr; gap: 0; }
  .ruta::before { left: 26px; right: auto; top: 50px; bottom: 30px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--dorado) 0 6px, transparent 6px 12px); }
  .parada { grid-template-columns: 52px 1fr; justify-items: start; gap: 18px; padding-bottom: 26px; text-align: left; }
  .parada h3 { margin-top: 12px; }
  .tarjeta-accion { padding: 40px 32px; }
  .tarjeta-accion .botones { justify-content: flex-start; }
  .tarjeta-nosotros { margin: 0 auto; }
  .acento-nosotros { left: -60px; top: 20px; transform: none; width: 280px; }
  .seccion { padding: 76px 0; }
  .pie-columnas { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  .bloque-proyectos { margin-top: 72px; }
  .proyectos-grid, .formas, .formas.dos { grid-template-columns: 1fr; }
  .proyecto { min-height: 420px; }
  .ficha-sello { top: -40px; right: -8px; width: 96px; height: 96px; }
}
@media (max-width: 1040px) {
  .hamburguesa { display: block; }
  .menu { display: none; position: absolute; top: var(--cabecera); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 6px 28px 22px; background: var(--fondo); border-bottom: 1px solid var(--linea); box-shadow: 0 16px 30px rgba(85, 46, 44, .08); }
  .menu.abierto { display: flex; }
  .menu a, .cabecera.solida .menu a { padding: 14px 0; border-bottom: 1px solid var(--linea); color: var(--granate); }
  .menu .idioma { align-self: flex-start; margin-top: 14px; padding: 6px 12px; border: 1px solid var(--linea); }
  .menu .boton { margin-top: 14px; border-bottom: 0; color: #fff; }
}
@media (max-width: 560px) {
  :root { --cabecera: 68px; }
  body { font-size: 1rem; }
  .wrap { padding: 0 16px; }
  .menu { padding: 6px 16px 20px; }
  .marca img { height: 40px; }
  .accesos { padding-top: 28px; }
  .accesos .wrap { grid-template-columns: 1fr; gap: 10px; }
  .frase { padding-top: 70px; }
  .usos { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ficha-cuerpo { padding: 20px 18px 14px; }
  .ficha dl, .datos { grid-template-columns: 1fr; }
  .ficha dt, .datos dt { padding-bottom: 0; border-bottom: 0; }
  .ficha dd, .datos dd { padding-top: 2px; }
  .pruebas { grid-template-columns: 1fr; gap: 26px; }
  .reservado, .requisitos { padding: 22px 20px; }
  .acento-compradores { width: 300px; right: -80px; }
  .acento-productores { width: 340px; }
  .acento-proyectos { width: 340px; right: -90px; }
  .tarjeta-nosotros { padding: 30px 24px; }
  .contacto-figura::before { right: -16px; top: -20px; }
  .formulario { grid-template-columns: 1fr; padding: 22px 18px; }
  .pie-columnas { grid-template-columns: 1fr; gap: 28px; }
  .revision [data-confirmar]::after { white-space: normal; }
  .proyecto dl { grid-template-columns: repeat(2, 1fr); }
  .mineral-ficha { width: 4.6rem; }
  .mf-simbolo { font-size: 2.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .acceso, .capsula, .boton { transition: none; }
  .js [data-aparece] { opacity: 1; transform: none; transition: none; }
  .mapa-region, .mapa-peru-svg .dep.con-proyectos { transition: none; }
  .entra { animation: none; }
}

/* ---------------------------------------------------------------- mapa de proyectos (2026-11-02) */
.mapa-proyectos { display: grid; grid-template-columns: minmax(260px, 400px) minmax(0, 520px); justify-content: start; gap: 24px 56px; align-items: center; margin-bottom: 56px; }
.mapa-figura { margin: 0; }
.mapa-peru-svg { display: block; width: 100%; height: auto; }
.mapa-peru-svg .dep { fill: #E2D6D3; stroke: var(--fondo-2); stroke-width: 1.4; stroke-linejoin: round; }
/* dorado: "aquí hay proyectos" (el naranja y el azul de la web dicen de quién es cada uno: eso va en la lista) */
.mapa-peru-svg .dep.con-proyectos { fill: #DDBF8E; cursor: pointer; transition: fill .2s; }
.mapa-peru-svg .dep.con-proyectos:hover { fill: var(--dorado); }
.mapa-peru-svg .dep.activa, .mapa-peru-svg .dep.activa:hover { fill: var(--granate); }
.mapa-marcas { pointer-events: none; }
.mapa-marcas circle { fill: var(--granate); stroke: #fff; stroke-width: 2.5; }
.mapa-marcas text { fill: #fff; font: 700 15px var(--titulos); text-anchor: middle; }
.marca-region.activa circle { fill: #fff; stroke: var(--granate); }
.marca-region.activa text { fill: var(--granate); }
.mapa-figura figcaption { margin-top: 10px; font-size: .86rem; color: var(--gris); }
.mapa-ayuda { margin-bottom: 14px; font-weight: 600; color: var(--granate); }
.mapa-regiones { display: grid; gap: 10px; }
.mapa-region { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; width: 100%; padding: 14px 18px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); color: var(--texto); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.mapa-region:hover { border-color: var(--granate); }
.mapa-region[aria-pressed="true"] { border-color: var(--granate); background: var(--granate); color: #fff; }
.mr-nombre { font-family: var(--titulos); font-weight: 700; font-size: 1.05rem; letter-spacing: .03em; text-transform: uppercase; }
.mr-cuenta { font-size: .9rem; color: var(--texto-2); }
.mapa-region[aria-pressed="true"] .mr-cuenta { color: #fff; }
.mr-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.mr-chips span { padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.mr-ict { background: #E8803F; color: var(--granate-hondo); }
.mr-alianza { background: var(--azul); color: var(--azul-hondo); }
.mapa-estado { margin-top: 16px; font-weight: 600; color: var(--granate); }
.mapa-todos { margin-left: 6px; padding: 0; border: 0; background: none; color: var(--rojo); font: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 980px) {
  .mapa-proyectos { grid-template-columns: 1fr; gap: 24px; }
  .mapa-figura { width: min(300px, 80%); margin: 0 auto; }
  .mapa-figura figcaption { text-align: center; }
}

/* ---------------------------------------------------------------- aviso de privacidad (2026-11-02) */
.legal { max-width: 720px; margin: 0 auto; padding: 48px 24px 64px; }
.legal .marca img { height: 48px; width: auto; }
.legal h1 { margin: 36px 0 16px; font-size: clamp(1.9rem, 5vw, 2.6rem); }
.legal h2 { margin: 34px 0 10px; font-size: 1.15rem; letter-spacing: .03em; }
.legal p { margin: 0 0 12px; color: var(--texto-2); }
.legal .legal-entrada { font-size: 1.12rem; color: var(--texto); }
.legal a:not(.boton) { color: var(--rojo); }
.legal .legal-fecha { margin-top: 36px; font-size: .92rem; }
.legal .boton { margin-top: 12px; }
.legal .legal-otro-idioma { margin-top: 28px; font-size: .92rem; }
.formulario-pie small a { color: var(--rojo); font-weight: 600; }

/* ---------------------------------------------------------------- página 404 (dirección que no existe) */
.error-404 { min-height: 100vh; display: grid; align-content: center; justify-items: start; gap: 20px; max-width: 600px; margin: 0 auto; padding: 48px 24px; }
.error-404 .marca img { height: 48px; width: auto; }
.error-404 h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin-top: 12px; }
.error-404 p { font-size: 1.08rem; color: var(--texto-2); }
.error-404 .error-en { font-size: .95rem; color: var(--gris); }

/* =====================================================================
   WEB POR PÁGINAS (publicada el 2026-11-05) · una misma plantilla para todas las páginas
   - El Inicio es la tapa: la foto a pantalla completa.
   - Cada página interior empieza igual: franja granate, el título a la izquierda y, a la derecha, el objeto de la
     página (lo que el lector va a recibir o a usar). Cada página lleva el color de su puerta en el Inicio.
   - El cuerpo: secciones con el mismo encabezado, alternando fondo claro y gris.
   - Todas terminan igual: la tarjeta roja «Empiece por…». El formulario está solo en Contacto.
   Por qué: con tres públicos, una sola tira larga obligaba a cada uno a pasar por lo que no era para él (Hopkins:
   primero se elige a quién se le habla; Krug: la gente recorre la página buscando su parte). Y un mismo orden en
   todas las páginas hace que el lector sepa dónde mirar (Wheeler: un sistema coherente, con libertad dentro).
   ===================================================================== */
body { --acento: var(--naranja); }
body[data-pagina="productores"] { --acento: var(--dorado); }
body[data-pagina="proyectos"] { --acento: var(--cobre); }
body[data-pagina="empresa"] { --acento: var(--rojo-vivo); }

/* La página en la que uno está, marcada en el menú (Krug: «¿dónde estoy?») */
.menu a[aria-current="page"]:not(.boton) { text-decoration: underline 2px var(--naranja); text-underline-offset: 9px; }
.cabecera.solida .menu a[aria-current="page"]:not(.boton) { color: var(--rojo); }
.menu .boton[aria-current="page"] { background: var(--rojo-2); }
/* En el menú del celular, el botón EN salía alto y angosto (también en la web publicada) */
@media (max-width: 1040px) {
  .cabecera .menu .idioma, .cabecera.solida .menu .idioma { padding: 6px 12px; }
}

/* 1. La cabeza de cada página: franja granate, el título a la izquierda y el objeto a la derecha */
.cabeza-pagina { position: relative; isolation: isolate; overflow: hidden; margin-top: calc(-1 * var(--cabecera) - 1px); padding: calc(var(--cabecera) + 60px) 0 76px; color: var(--claro);
  background-color: var(--granate); background-image: radial-gradient(110% 95% at 88% 8%, #6A3A31 0%, var(--granate) 46%, var(--granate-hondo) 100%); }
.cabeza-pagina::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .06;
  background: url("img/curvas-de-nivel.svg") center / cover no-repeat; filter: brightness(2.6) saturate(.25); }
.cabeza-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; min-height: 440px; }
.cabeza-texto .antetitulo { color: var(--dorado); }
.cabeza-texto .antetitulo::before { background: var(--acento); }
.cabeza-texto h1 { margin: 18px 0; color: #fff; font-size: clamp(1.9rem, 3.5vw, 2.8rem); text-wrap: balance; }
.cabeza-texto h1::after { content: ""; display: block; width: 220px; height: 22px; margin-top: 16px; background: url("img/cumbres-claro.svg") left bottom / 220px 22px no-repeat; }
.cabeza-texto .entrada { max-width: 34em; font-size: 1.15rem; color: var(--claro); }
.cabeza-texto .botones { margin-top: 30px; }
.cabeza-objeto { justify-self: end; width: 100%; max-width: 470px; }
.cabeza-contacto .cabeza-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
.cabeza-contacto .cabeza-objeto { max-width: 640px; }

/* El objeto: una pieza blanca, con el color de la página arriba (la misma familia que la ficha de la empresa) */
.objeto { position: relative; display: block; padding: 26px 28px 22px; border-radius: 10px; border-top: 5px solid var(--acento); background: var(--papel); color: var(--texto); text-decoration: none; box-shadow: 0 30px 60px rgba(20, 8, 6, .38); }
.objeto-titulo { padding-bottom: 12px; border-bottom: 2px solid var(--granate); font-family: var(--titulos); font-weight: 700; font-size: 1.02rem; letter-spacing: .04em; text-transform: uppercase; color: var(--granate); }
.objeto-sello { position: absolute; top: -30px; right: -22px; width: 96px; height: 96px; transform: rotate(-12deg); opacity: .9; pointer-events: none; }
/* Compradores: la ficha técnica, con los datos a pedido */
.objeto-filas { display: grid; grid-template-columns: auto 1fr; align-items: center; }
.objeto-filas > div { display: contents; }
.objeto-filas dt, .objeto-filas dd { padding: 15px 0; border-bottom: 1px dashed var(--linea); }
.objeto-filas dt { padding-right: 22px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.dato-oculto { display: block; width: var(--ancho, 50%); height: 12px; border-radius: 6px; background: repeating-linear-gradient(135deg, #E6D6D2 0 6px, #F3EAE7 6px 12px); }
.objeto-pie { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-weight: 700; color: var(--granate); }
.objeto-pie svg { width: 20px; height: 20px; flex: none; color: var(--acento); }
/* Productores: el WhatsApp ya armado (tocarlo abre WhatsApp con ese mensaje) */
.chat { display: grid; gap: 14px; transition: transform .2s, box-shadow .2s; }
.chat:hover { transform: translateY(-3px); box-shadow: 0 36px 70px rgba(20, 8, 6, .44); }
.chat-cabeza { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 2px solid var(--granate); }
.chat-cabeza svg { width: 24px; height: 24px; flex: none; color: var(--acento); }
.chat-cabeza b { font-family: var(--titulos); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--granate); }
.chat-cabeza small { margin-left: auto; font-size: .82rem; font-weight: 600; color: var(--gris); }
.chat-burbuja { justify-self: end; max-width: 94%; padding: 14px 16px; border-radius: 14px 14px 4px 14px; background: #F5EBDB; color: var(--texto); font-size: .98rem; line-height: 1.6; }
.chat-nota { font-size: .9rem; color: var(--gris); }
/* Proyectos: el resumen (cifras, regiones y minerales potenciales) */
.resumen-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 10px; }
.resumen-cifras p { display: grid; gap: 4px; }
.resumen-cifras b { font-family: var(--titulos); font-weight: 700; font-size: 3.2rem; line-height: 1; color: var(--granate); }
.resumen-cifras span { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.resumen-regiones { padding-bottom: 14px; border-bottom: 1px dashed var(--linea); font-weight: 600; color: var(--granate); }
.resumen-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; }
.resumen-chips span { padding: 4px 12px; border-radius: 999px; font-size: .85rem; font-weight: 700; }
.resumen-rotulo { margin-bottom: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.resumen-minerales { display: flex; flex-wrap: wrap; gap: 6px; }
.resumen-minerales .mf { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 7px; background: #E8803F; color: var(--granate-hondo); font-family: var(--titulos); font-weight: 700; font-size: 1.25rem; line-height: 1; box-shadow: 0 6px 14px rgba(0, 0, 0, .12); }
.resumen-minerales .mf small { position: absolute; top: 4px; left: 5px; font: 700 .5rem/1 var(--cuerpo); opacity: .75; }
/* La empresa: su ficha con el sello, ahora como objeto de la cabeza */
.cabeza-objeto .ficha { border-top: 5px solid var(--acento); box-shadow: 0 30px 60px rgba(20, 8, 6, .38); }
/* Contacto: el formulario es el objeto */
.cabeza-contacto .contacto-figura::before { display: none; }
.cabeza-contacto .formulario { border-top: 5px solid var(--acento); box-shadow: 0 30px 60px rgba(20, 8, 6, .38); }

/* 2. El cuerpo */
.frase.alterna { padding-bottom: 96px; background: var(--fondo-2); }
.seccion:not(.oscura) .requisitos { border: 1px solid var(--linea); border-left: 4px solid var(--acento); background: var(--papel); color: var(--texto); -webkit-backdrop-filter: none; backdrop-filter: none; }
.seccion:not(.oscura) .requisitos h3 { color: var(--granate); }
.seccion:not(.oscura) .requisitos ul { margin-bottom: 0; }
.pruebas.cuatro { grid-template-columns: repeat(4, 1fr); gap: 34px 28px; }
.canales-seccion { padding: 64px 0; }
.canales.en-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 0; }
.canales.en-fila li { padding: 16px 18px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); }
/* Lotes disponibles: la tarjeta de los proyectos, con la luna de ICT. Solo lotes verificados */
.proyecto.lote { min-height: 340px; }
.lote-hueco { display: grid; place-items: center; min-height: 340px; padding: 28px; border: 1.5px dashed rgba(85, 46, 44, .35); border-radius: 18px; text-align: center; font-size: .98rem; color: var(--gris); }

@media (max-width: 980px) {
  .cabeza-pagina { padding: calc(var(--cabecera) + 44px) 0 60px; }
  .cabeza-grid, .cabeza-contacto .cabeza-grid { grid-template-columns: 1fr; gap: 44px; min-height: 0; }
  .cabeza-objeto { justify-self: stretch; max-width: 560px; }
  .objeto-sello { top: -26px; right: -6px; width: 80px; height: 80px; }
  .pruebas.cuatro { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cabeza-texto .entrada { font-size: 1.05rem; }
  .objeto { padding: 22px 18px 18px; }
  .objeto-filas dt { padding-right: 14px; }
  .resumen-cifras b { font-size: 2.6rem; }
  .pruebas.cuatro { grid-template-columns: 1fr; }
}

/* 2026-11-05 · Portada: cada pregunta con su botón, que lleva a la página de esa persona (antes, los dos botones iban
   sueltos y uno saltaba directo al formulario). El borde de cada una lleva el color de su puerta (Krug: que se vea
   qué es clicable y adónde lleva). */
.portada .entra { grid-column: 1 / -1; max-width: 46rem; }
.rutas { display: grid; gap: 12px; }
.ruta-portada { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "pregunta accion" "texto accion"; align-items: center; gap: 3px 22px; padding: 16px 18px 16px 20px; border: 1px solid rgba(255, 255, 255, .2); border-left: 4px solid var(--naranja); border-radius: var(--radio); background: rgba(46, 24, 21, .58); color: var(--claro); text-decoration: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .2s, border-color .2s, transform .2s; }
.ruta-portada + .ruta-portada { border-left-color: var(--dorado); }
.ruta-portada:hover { background: rgba(46, 24, 21, .76); border-color: rgba(255, 255, 255, .42); transform: translateY(-2px); }
.ruta-portada b { grid-area: pregunta; font-size: 1.1rem; color: #fff; }
.ruta-texto { grid-area: texto; font-size: 1.02rem; line-height: 1.45; }
.ruta-accion { grid-area: accion; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: var(--radio); background: #fff; color: var(--granate); font-weight: 700; font-size: .96rem; white-space: nowrap; }
.ruta-accion svg { width: 17px; height: 17px; flex: none; color: var(--rojo); }
@media (max-width: 640px) {
  .ruta-portada { grid-template-columns: 1fr; grid-template-areas: "pregunta" "texto" "accion"; }
  .ruta-accion { justify-self: start; margin-top: 10px; }
}

/* 2026-11-05 · Un cambio de página que se nota (Matias: «es tan rápido que pareciera que no ha surgido efecto»): la
   página nueva aparece con un fundido corto y su cabeza sube un poco, como la portada. El menú se queda quieto y solo
   se mueve la línea naranja de la página actual. Quien pidió menos movimiento en su equipo no lo ve. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 220ms ease both pagina-sale; }
::view-transition-new(root) { animation: 380ms ease both pagina-entra; }
@keyframes pagina-sale { to { opacity: 0; } }
@keyframes pagina-entra { from { opacity: 0; } }
.cabecera { view-transition-name: cabecera; }
.cabeza-texto { animation: entra .6s ease both; }
.cabeza-objeto { animation: entra .6s .12s ease both; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .cabeza-texto, .cabeza-objeto { animation: none; }
}

/* 2026-11-05 · Cada metal con su color en sus cuadritos (Matias: «que se vea todo naranja está medio raro»). El cuadrito
   dice qué metal es; de quién es el proyecto ya lo dicen la tarjeta (granate o azul) y su etiqueta. Un brillo suave,
   como el «brillo metálico» con que se reconoce un mineral a simple vista. */
.mf[data-simbolo="Au"] { --metal: #D8A93B; --metal-texto: #3A2A0C; }
.mf[data-simbolo="Cu"] { --metal: #C2683C; --metal-texto: #2B1208; }
.mf[data-simbolo="Ag"] { --metal: #CBD1D8; --metal-texto: #2A2F36; }
.mf[data-simbolo="Pb"] { --metal: #7F8A97; --metal-texto: #14181D; }
.mf[data-simbolo="Zn"] { --metal: #A6B6C3; --metal-texto: #1E252C; }
.mf[data-simbolo="Sb"] { --metal: #B3B5BC; --metal-texto: #1E2228; }
.mf[data-simbolo="Mn"] { --metal: #9C8F98; --metal-texto: #221B20; }
:is(.proyecto .mineral-ficha.varios, .resumen-minerales, .selector-lista, .filtro-boton, .celda-boton) .mf[data-simbolo] {
  background: linear-gradient(145deg, color-mix(in srgb, var(--metal) 55%, #fff) 0%, var(--metal) 48%, color-mix(in srgb, var(--metal) 78%, #000) 100%);
  color: var(--metal-texto); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 14px rgba(0, 0, 0, .25); }

/* 2026-11-05 · El mineral primero (Matias): en las páginas de cada lector, lo primero que se elige es el mineral */
.selector-lista .mf, .filtro-boton .mf, .celda-boton .mf { position: relative; display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 7px; font-family: var(--titulos); font-weight: 700; font-size: 1.15rem; line-height: 1; }
.selector-lista .mf small, .filtro-boton .mf small, .celda-boton .mf small { position: absolute; top: 3px; left: 4px; font: 700 .48rem/1 var(--cuerpo); opacity: .75; }
/* Inversionistas: el objeto «¿En qué mineral quiere invertir?» */
.selector-lista { list-style: none; display: grid; gap: 2px; margin-top: 10px; }
.selector-lista a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 5px 8px; border-radius: var(--radio); color: var(--granate); text-decoration: none; transition: background .15s; }
.selector-lista a:hover { background: var(--fondo-2); }
.selector-lista b { font-family: var(--titulos); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.selector-lista a > span:last-child { font-size: .88rem; color: var(--gris); }
/* el filtro de arriba de las tarjetas, con el mapa al lado */
.filtro-proyectos { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 24px 48px; align-items: start; margin-bottom: 40px; padding: 26px 28px; border: 1px solid var(--linea); border-radius: 12px; background: var(--papel); }
.filtro-titulo { margin-bottom: 10px; font-weight: 700; color: var(--granate); }
.filtro-opciones + .filtro-titulo { margin-top: 20px; }
.filtro-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro-boton { display: inline-flex; align-items: center; gap: 9px; padding: 5px 13px 5px 5px; border: 1.5px solid var(--linea); border-radius: 999px; background: var(--fondo); color: var(--granate); font: 600 .95rem/1 var(--cuerpo); cursor: pointer; transition: border-color .15s, background .15s; }
.filtro-boton:not(:has(.mf)) { padding: 9px 14px; }
.filtro-boton .mf { width: 2rem; height: 2rem; border-radius: 50%; font-size: .9rem; }
.filtro-boton .mf small { display: none; }
.filtro-boton > small { font-size: .8rem; font-weight: 700; color: var(--gris); }
.filtro-boton:hover { border-color: var(--granate); }
.filtro-boton[aria-pressed="true"] { border-color: var(--granate); background: var(--granate); color: #fff; }
.filtro-boton[aria-pressed="true"] > small { color: var(--rosa); }
.filtro-estado { min-height: 1.4em; margin-top: 16px; font-weight: 600; color: var(--rojo); }
.filtro-proyectos .mapa-figura { width: 100%; }
/* Compradores y Productores: elegir el mineral dentro del objeto */
.objeto-minerales { margin: 14px 0 4px; }
.objeto-pregunta { margin-bottom: 8px; font-weight: 700; color: var(--granate); }
.objeto-celdas { display: flex; flex-wrap: wrap; gap: 4px; }
.celda-boton { display: grid; justify-items: center; gap: 4px; padding: 4px 4px 3px; border: 1.5px solid transparent; border-radius: 9px; background: none; color: var(--gris); font: 600 .7rem/1.1 var(--cuerpo); cursor: pointer; }
.celda-boton:hover { border-color: var(--linea); }
.celda-boton[aria-pressed="true"] { border-color: var(--granate); color: var(--granate); }
.objeto-accion { width: 100%; margin-top: 16px; }
.chat-mineral { color: var(--rojo); }
@media (max-width: 980px) {
  .filtro-proyectos { grid-template-columns: 1fr; padding: 20px 18px; }
  .filtro-proyectos .mapa-figura { width: min(220px, 70%); margin: 0 auto; }
}