/* aluminio.ar — minimalista: blanco, aire, texto negro. Las fotos ponen el color;
   el naranja aparece solo en las acciones y en el dato que importa. */

/* fuentes propias */
@font-face { font-family: "Onest"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/onest-latin-wght-normal.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: "Onest"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/onest-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(fonts/bricolage-grotesque-latin-opsz-normal.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: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* fin fuentes */

:root {
  --bg: #ffffff;
  --bg-2: #f5f5f4;
  --ink: #111111;
  --ink-2: #4b4b4b;
  --ink-3: #6f6f6f;
  --line: #e8e8e6;
  --acento: #ef5a24;
  --acento-ink: #ffffff;
  --acento-texto: #c2451a; /* naranja con contraste suficiente (4,5:1) para texto chico sobre blanco y sobre el gris claro */
  --s-mercado: #ef5a24;
  --s-empresas: #2563eb;
  --s-obras: #16a34a;
  --s-comercio: #7c3aed;
  --s-reciclado: #0d9488;
  --s-comunidad: #d97706;
  --cota: #ef5a24;
  --bien: #15803d; /* evaluación para extruir de Subí tu plano */
  --ojo: #b45309;
  --mal: #c81e1e;
  --relleno: #f1f1ef;
  --grilla: rgba(17, 17, 17, 0.045);
  --titulo: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --texto: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 14px;
  --titulo-grande: clamp(1.85rem, 1.6vw + 1.5rem, 3rem); /* el título de cada página y de cada sección, igual en todo el sitio (≈46 px en la compu, 30 en el celu) */
  --max: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --data-up: #2f7d4f; /* Indicadores: subas y bajas apagadas, siempre con flecha y signo */
  --data-down: #b5482a;
  --data-neutral: var(--ink-3);
  --data-muted: var(--ink-3);
  --chart-grid: var(--line);
  --chart-primary: var(--acento);
  --chart-secondary: #2563eb;
  --chart-3: #7c3aed;
  --chart-4: #0d9488;
  --dc-fondo: #111111; /* Doble Click: el recuadro oscuro */
  --dc-borde: transparent;
  --carta-fondo: #f8f3ee; /* la carta de la portada: un recuadro cálido */
  --carta-linea: #ebe0d5;
  --lingo-globo: #fdf3ee; /* los globos de Lingo */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bien: #4ade80; --ojo: #fbbf24; --mal: #f87171;
    --bg: #0e0e0f; --bg-2: #18181a; --ink: #f2f2f0; --ink-2: #bdbdb8; --ink-3: #85857f; --line: #262628;
    --acento: #ff7a45; --acento-texto: #ff7a45; --acento-ink: #0e0e0f; --cota: #ff7a45; --relleno: #1c1c1e; --grilla: rgba(242, 242, 240, 0.05);
    --s-mercado: #ff7a45; --s-empresas: #6b9bff; --s-obras: #4ade80; --s-comercio: #b794f6; --s-reciclado: #2dd4bf; --s-comunidad: #fbbf24;
    --dc-fondo: #18181a; --dc-borde: #2a2a2d;
    --carta-fondo: #1a1715; --carta-linea: #2e2823; --lingo-globo: #221a16;
    --data-up: #6cc495; --data-down: #f0927a; --chart-secondary: #6b9bff; --chart-3: #b794f6; --chart-4: #2dd4bf;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bien: #4ade80; --ojo: #fbbf24; --mal: #f87171;
  --bg: #0e0e0f; --bg-2: #18181a; --ink: #f2f2f0; --ink-2: #bdbdb8; --ink-3: #85857f; --line: #262628;
  --acento: #ff7a45; --acento-texto: #ff7a45; --acento-ink: #0e0e0f; --cota: #ff7a45; --relleno: #1c1c1e; --grilla: rgba(242, 242, 240, 0.05);
  --s-mercado: #ff7a45; --s-empresas: #6b9bff; --s-obras: #4ade80; --s-comercio: #b794f6; --s-reciclado: #2dd4bf; --s-comunidad: #fbbf24;
    --dc-fondo: #18181a; --dc-borde: #2a2a2d;
    --carta-fondo: #1a1715; --carta-linea: #2e2823; --lingo-globo: #221a16;
    --data-up: #6cc495; --data-down: #f0927a; --chart-secondary: #6b9bff; --chart-3: #b794f6; --chart-4: #2dd4bf;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.6 var(--texto); }
/* Números de ancho fijo solo donde se encolumnan o cambian en vivo (tablas, datos de las herramientas).
   En el texto corrido van proporcionales: con ancho fijo, el "1" de Onest deja un hueco ("1 3 familias").
   Las cifras grandes usan el atajo font: y ya eran proporcionales */
table, .rotulo-calc dd, .pl-datos dd, .dib-datos dd, #n-forma, #p-total { font-variant-numeric: tabular-nums; }
::selection { background: var(--acento); color: var(--acento-ink); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
[hidden] { display: none !important; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 30; background: var(--ink); color: var(--bg); padding: 8px 14px; }
.skip:focus { top: 8px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 500 0.94rem/1 var(--texto); padding: 13px 22px; border-radius: 999px; border: 0;
  background: var(--acento-texto); color: var(--acento-ink); cursor: pointer; transition: opacity 0.2s;
}
.btn:hover { opacity: 0.86; }
.btn--oscuro { background: var(--ink); color: var(--bg); }
.btn--linea { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn--linea:hover { box-shadow: inset 0 0 0 1px var(--ink); opacity: 1; }

/* Sección: texto chico con un punto de color, nada más */
.chip { display: inline-flex; align-items: center; gap: 7px; width: fit-content; font: 500 0.8rem/1 var(--texto); color: var(--ink-2); }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tag, var(--acento)); }
.chip--claro { color: var(--ink-2); }
.chip--mini { font-size: 0.74rem; }
.meta { font-size: 0.82rem; color: var(--ink-3); }

/* ── Cabecera ─────────────────────────────────────────────────────────── */

.ticker { border-bottom: 1px solid var(--line); font-size: 0.78rem; color: var(--ink-3); }
.ticker .wrap { display: flex; align-items: center; gap: 16px; min-height: 34px; }
.ticker__datos { flex: 1; min-width: 0; display: flex; align-items: center; gap: 22px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.ticker__datos::-webkit-scrollbar { display: none; }
.ticker .tema { width: 30px; height: 30px; margin-right: -7px; }
.ticker .tema__ico { width: 16px; height: 16px; }
/* en el celular el botón claro/oscuro también va arriba: "Aluminio LME" queda "LME" para que entre todo */
@media (max-width: 640px) { .ticker .wrap, .ticker__datos { gap: 14px; } .ticker__largo { display: none; } }
.ticker__hoy { margin-right: auto; }
@media (max-width: 640px) { .ticker__hoy { display: none; } }
.ticker__item b { color: var(--ink); font-weight: 600; margin-left: 4px; }

.top__in { display: flex; align-items: center; gap: 32px; padding-block: 22px 8px; }
.logo { display: inline-flex; align-items: center; gap: 9px; font: 700 1.5rem/1 var(--titulo); letter-spacing: -0.04em; }
.logo b { color: var(--acento); font-weight: 700; }
.logo__icono { width: 30px; height: 30px; flex: none; }
.logo__icono rect { fill: #ef5a24; }
.logo__icono path { fill: #fff; }
.logo__icono .logo__n { fill: #ffe0d3; }
.menu { display: flex; gap: 24px; }
.menu a { font-size: 0.95rem; color: var(--ink-3); transition: color 0.2s; }
.menu a:hover, .menu a[aria-current] { color: var(--ink); }
.top__cta { padding: 11px 18px; white-space: nowrap; background: var(--ink); color: var(--bg); }

.secciones { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.secciones__in { display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; }
.secciones__in::-webkit-scrollbar { display: none; }
.chip-nav { flex: none; font-size: 0.9rem; padding: 14px 0 13px; color: var(--ink-3); border-bottom: 1.5px solid transparent; margin-bottom: -1px; transition: color 0.2s; }
.chip-nav:hover { color: var(--ink); }
.chip-nav[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
.chip-nav--herr { display: none; color: var(--acento-texto); }
.secciones__fila { display: flex; align-items: center; min-width: 0; }
/* el isologo chico aparece en la barra fija cuando ya no se ve el encabezado (punto 22 del documento de JIS) */
.secciones__logo { display: flex; flex: none; width: 0; margin-right: 0; opacity: 0; overflow: hidden; pointer-events: none; transition: width 0.25s var(--ease), margin 0.25s var(--ease), opacity 0.2s; }
.secciones__logo .logo__icono { width: 26px; height: 26px; }
.secciones--pegada .secciones__logo { width: 26px; margin-right: 18px; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .secciones__logo { transition: none; } }
/* el menú del celular va en su propia fila, arriba de las herramientas o las secciones */
.secciones__fila--menu { display: none; }
.desliza-caja { position: relative; flex: 1; min-width: 0; }
.secciones__in { position: relative; }
.desliza { position: absolute; top: 0; bottom: 1px; z-index: 2; display: grid; align-items: center; width: 36px; padding: 0; border: 0; color: var(--ink); cursor: pointer; }
.desliza--izq { left: 0; justify-items: start; background: linear-gradient(90deg, var(--bg) 45%, transparent); }
.desliza--der { right: 0; justify-items: end; background: linear-gradient(270deg, var(--bg) 45%, transparent); }
.desliza:hover { color: var(--acento-texto); }
/* las dos flechas quedan siempre a la vista, en la compu y en el celular (pedidos del 2 y el 5/10/2026): la del lado
   donde ya no hay más se ve apagada, y la fila deja lugar en las puntas para que la flecha no tape ninguna palabra */
.desliza--tope { background: none; opacity: 0.3; pointer-events: none; }
.desliza-caja--sobra .secciones__in::before, .desliza-caja--sobra .secciones__in::after { content: ''; flex: none; width: 1px; }

/* ── Fotos ────────────────────────────────────────────────────────────── */

.media { position: relative; overflow: hidden; background: var(--relleno); aspect-ratio: 3 / 2; border-radius: var(--r); }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.media picture { display: contents; }
.media__vacia { position: absolute; inset: 0; display: grid; place-items: center; }
.media__vacia svg { width: 36px; height: 36px; opacity: 0.25; }
.media__vacia rect { fill: var(--ink); }
.media__vacia path, .media__vacia .logo__n { fill: var(--bg); }
.media__credito { position: absolute; right: 10px; bottom: 10px; font-size: 0.68rem; color: #fff; background: rgba(0, 0, 0, 0.4); padding: 3px 8px; border-radius: 999px; }
.media__credito[data-credito]::before { content: attr(data-credito); }

/* ── Portada ──────────────────────────────────────────────────────────── */

@keyframes subir { from { opacity: 0; transform: translateY(10px); } }
.hero { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); padding-top: 34px; }
.hero__main { display: grid; gap: 20px; align-content: start; animation: subir 0.8s var(--ease) both; }
.hero__main .media { aspect-ratio: 16 / 10; }
.hero__main:hover img { transform: scale(1.025); }
.hero__txt { display: grid; gap: 12px; }
.hero__txt :is(h1, .hero__titulo) { margin: 0; font-size: clamp(2rem, 2.8vw + 0.8rem, 3.4rem); line-height: 1.04; }
.hero__main:hover :is(h1, .hero__titulo) { color: var(--acento); }
.hero__txt p { margin: 0; font-size: 1.08rem; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }

.hero__lado { animation: subir 0.8s 0.1s var(--ease) both; }
.hero__lado h2 { margin: 0; padding-bottom: 12px; font-size: 0.8rem; font-family: var(--texto); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--ink); }
.hero__lado ol { list-style: none; margin: 0; padding: 0; }
.hero__lado li + li { border-top: 1px solid var(--line); }
.hero__lado li a { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 16px; padding: 18px 0; align-items: start; }
.hero__lado li a > div { grid-column: 1; grid-row: 1; }
.hero__lado .media { grid-column: 2; grid-row: 1; aspect-ratio: 1; border-radius: 10px; }
.hero__lado h3 { margin: 6px 0 6px; font-size: 1.05rem; line-height: 1.25; letter-spacing: -0.015em; }
.hero__lado a:hover h3 { color: var(--acento); }

.bloque { padding-top: clamp(64px, 8vw, 104px); }
.bloque__cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; margin-bottom: 32px; }
.bloque__cab h2, .bloque__cab .titulo-pagina { margin: 0; font-size: clamp(1.7rem, 1.4vw + 1rem, 2.4rem); line-height: 1.05; }
.bloque__cab .titulo-pagina { font-size: var(--titulo-grande); line-height: 1.04; }
.bloque__cab p { margin: 8px 0 0; color: var(--ink-3); max-width: 60ch; }

.filtros { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.filtro { font-size: 0.9rem; padding: 4px 0; border: 0; background: none; color: var(--ink-3); cursor: pointer; border-bottom: 1.5px solid transparent; transition: color 0.2s; }
.filtro:hover { color: var(--ink); }
.filtro[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }

.grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
.grilla .card[hidden] { display: none; }
/* las notas que no se ven todavía no se arman hasta que se acercan a la pantalla (Noticias tiene decenas): la
   página carga más rápido en el celular y se ve igual */
.grilla > .card { content-visibility: auto; contain-intrinsic-size: auto 440px; }
.grilla__vacio { grid-column: 1 / -1; padding: 32px 0; margin: 0; color: var(--ink-3); }
.card { display: flex; flex-direction: column; gap: 16px; }
.card:hover img { transform: scale(1.035); }
.card__txt { display: grid; gap: 9px; align-content: start; }
.card :is(h2, h3) { margin: 0; font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.02em; }
.card:hover :is(h2, h3) { color: var(--acento); }
.card p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); }

/* ── Herramientas ─────────────────────────────────────────────────────── */

.herr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.herr-card { display: flex; flex-direction: column; gap: 18px; padding: 28px 24px 30px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.herr-card:nth-child(4n + 1) { padding-left: 0; border-left: 0; }
.herr-card__icono { width: 64px; height: 48px; display: grid; place-items: start; }
.herr-card__icono svg { width: 64px; height: 48px; }
.herr-card__icono svg .t { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.herr-card__icono svg .c { fill: none; stroke: var(--acento); stroke-width: 2; }
.herr-card__icono svg .r { fill: var(--relleno); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.herr-card__txt { display: grid; gap: 8px; }
.herr-card h3 { margin: 0; font-size: 1.25rem; line-height: 1.15; }
.herr-card p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--ink-2); }
.herr-card__ir { margin-top: auto; font-size: 0.92rem; font-weight: 500; color: var(--acento-texto); }
.herr-card--lista:hover h3 { color: var(--acento); }

.herr { padding-top: 40px; }
.herr__cab { display: grid; gap: 14px; justify-items: start; margin-bottom: 40px; max-width: 760px; }
.herr__cab h1, .portada-herr .herr__cab h2 { margin: 0; font-size: var(--titulo-grande); line-height: 1.04; }
.herr__cab p { margin: 0; font-size: 1.1rem; color: var(--ink-2); max-width: 62ch; }
/* Fichas de perfiles del catálogo */
.migas { font-size: 0.86rem; color: var(--ink-3); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.migas a { color: var(--ink-2); text-decoration: none; } .migas a:hover { color: var(--acento-texto); text-decoration: underline; }
.perfil__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; margin: 8px 0 34px; }
@media (max-width: 800px) { .perfil__grid { grid-template-columns: minmax(0, 1fr); } }
.perfil-dibujo { margin: 0; border: 1px solid var(--line); border-radius: var(--r); padding: 12px; background-image: linear-gradient(var(--grilla) 1px, transparent 1px), linear-gradient(90deg, var(--grilla) 1px, transparent 1px); background-size: 20px 20px; }
.perfil-dibujo svg { display: block; width: 100%; height: auto; max-height: 380px; }
.perfil-dibujo .sec { fill: var(--relleno); stroke: var(--ink); stroke-width: 1.6; fill-rule: evenodd; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.perfil-dibujo .cota { stroke: var(--cota); stroke-width: 1.1; fill: none; vector-effect: non-scaling-stroke; }
.perfil-dibujo .punto { fill: var(--cota); }
.perfil-dibujo text { fill: var(--cota); font-family: var(--texto); }
.perfil-dibujo figcaption { font-size: 0.8rem; color: var(--ink-3); margin-top: 6px; }
.perfil-dibujo--sin { display: grid; place-items: center; min-height: 220px; color: var(--ink-2); text-align: center; }
.perfil-ficha { margin: 0; display: grid; border-top: 1px solid var(--line); }
.perfil-ficha > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.perfil-ficha dt { color: var(--ink-3); font-size: 0.9rem; } .perfil-ficha dd { margin: 0; }
.perfil-ficha .meds { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.perfil__bloque { margin: 0 0 34px; } .perfil__bloque h2 { font-size: 1.35rem; margin: 0 0 12px; }
.perfil-pesos th, .perfil-pesos td { white-space: nowrap; }
/* Extruidos (/perfiles/): los normalizados con la silueta de su sección y las líneas en una lista */
.ext-grupo { margin-top: 30px; }
.ext-grupo__cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.ext-grupo__cab h2 { margin: 0; font: 600 0.8rem/1.3 var(--texto); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.ext-grupo__cab p { margin: 0; font-size: 0.9rem; color: var(--ink-3); }
.ext-formas { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; } /* 13 familias: 7 + 6 */
.ext-formas a { display: grid; justify-items: start; gap: 3px; height: 100%; padding: 14px 12px 16px; border-radius: var(--r); color: var(--ink); transition: background 0.2s; }
.ext-formas a:hover { background: var(--bg-2); }
.ext-formas__dib { display: block; width: 100%; height: 54px; margin-bottom: 8px; }
.silueta { display: block; width: 100%; height: 100%; max-width: 76px; overflow: visible; }
.silueta path { fill: var(--bg-2); fill-rule: evenodd; stroke: var(--ink-2); stroke-width: 1.4px; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: stroke 0.2s, fill 0.2s; }
.ext-formas a:hover .silueta path { stroke: var(--acento-texto); fill: var(--bg); }
.ext-formas b { font-size: 0.95rem; font-weight: 600; line-height: 1.25; }
.ext-formas small { font-size: 0.8rem; color: var(--ink-3); }
.ext-lineas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 36px; margin: 0; padding: 0; list-style: none; }
.ext-lineas a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.ext-lineas b { font-weight: 500; }
.ext-lineas a:hover b { color: var(--acento-texto); }
.ext-lineas span { font-size: 0.85rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .ext-formas { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ext-lineas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ext-formas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ext-lineas { grid-template-columns: minmax(0, 1fr); } }
.perfil-otros, .perfil-familias { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.perfil-otros a, .perfil-familias a { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); height: 100%; }
.perfil-otros a:hover, .perfil-familias a:hover { border-color: var(--acento); }
.perfil-otros span, .perfil-familias span { font-size: 0.82rem; color: var(--ink-3); }
.tabla-perfiles a { color: var(--ink); } .tabla-perfiles a.cod { font-weight: 700; color: var(--acento-texto); }
.b-fichas { margin: 10px 0 18px; font-size: 1.1rem; color: var(--ink-2); max-width: 60ch; }
.herr-grid .herr-card { min-height: 260px; }
.proyecto { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 48px; padding: 32px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.proyecto__icono svg { width: 84px; height: 64px; }
.proyecto__icono svg .t { fill: none; stroke: var(--ink); stroke-width: 2; }
.proyecto__icono svg .r { fill: var(--relleno); stroke: var(--ink); stroke-width: 2; }
.proyecto h2 { margin: 4px 0 6px; font-size: clamp(1.7rem, 1.6vw + 1rem, 2.4rem); }
.proyecto p { margin: 0; color: var(--ink-2); max-width: 70ch; }
.herr__nota { margin: 20px 0 0; font-size: 0.84rem; color: var(--ink-3); max-width: 90ch; }

/* ── Newsletter ───────────────────────────────────────────────────────── */

/* Línea destacada que lleva al newsletter (Noticias e Indicadores) */
.newsletter { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding-block: 40px; border-block: 1px solid var(--line); }
.newsletter h2 { margin: 0 0 8px; font-size: clamp(1.6rem, 1.4vw + 1rem, 2.2rem); line-height: 1.1; }
.newsletter p { margin: 0; color: var(--ink-3); }
.newsletter form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.newsletter .estado-form, .newsletter .error { grid-column: 1 / -1; }

/* ── Doble Click, el newsletter de los lunes: recuadro oscuro en los dos temas (en el oscuro, con borde) ── */
.dc__caja { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 36px; align-items: center; padding: clamp(24px, 4vw, 46px); border: 1px solid var(--dc-borde); border-radius: 22px; background: var(--dc-fondo); color: #ffffff; }
.dc__caja::after { content: ''; position: absolute; right: -90px; bottom: -90px; width: 280px; height: 280px; border-radius: 50%; border: 2px solid rgba(255, 122, 69, 0.5); box-shadow: 0 0 0 32px rgba(255, 122, 69, 0.07), 0 0 0 64px rgba(255, 122, 69, 0.04); pointer-events: none; }
.dc__col { position: relative; z-index: 1; display: grid; gap: 16px; min-width: 0; }
.dc__eti { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #a9a9a4; }
.dc__marca { display: flex; align-items: center; gap: 0.2em; margin: 0; font: 800 clamp(2.6rem, 1.8rem + 3vw, 4.2rem)/0.95 var(--titulo); letter-spacing: -0.05em; color: #ffffff; }
.dc__marca em { font-style: normal; color: #ff7a45; }
.dc__cursor { width: 0.55em; height: 0.7em; flex: none; fill: #ff7a45; }
.dc__bajada { margin: 0; color: #d9d5cf; font-size: 1.05rem; line-height: 1.55; max-width: 46ch; }
.dc form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.dc form input { background: #1c1c1c; border-color: #343434; color: #ffffff; }
.dc form input::placeholder { color: #8d8a85; }
.dc .aviso-datos, .dc__caja .aviso-datos { color: #8d8a85; }
.dc .error { grid-column: 1 / -1; color: #ff8a80; }
.dc .estado-form { margin: 0; color: #ffffff; }
.dc__mas { justify-self: start; font-size: 0.92rem; font-weight: 600; color: #ff7a45; }
.dc__mas:hover, .dc__ultima a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dc__ultima { display: grid; gap: 10px; padding: 18px 20px; border: 1px solid #2c2c2c; border-radius: 16px; background: #161616; }
.dc__ultima-eti { font-size: 0.8rem; color: #a9a9a4; }
.dc__ultima ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: n; }
.dc__ultima li { counter-increment: n; display: grid; grid-template-columns: 22px 1fr; gap: 6px; font-size: 0.95rem; line-height: 1.35; color: #eceae6; }
.dc__ultima li::before { content: counter(n); font: 800 1rem/1.3 var(--titulo); color: #ff7a45; }
.dc__ultima a { color: #ff7a45; font-weight: 600; font-size: 0.92rem; }
@media (max-width: 860px) { .dc__caja { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .dc form { grid-template-columns: minmax(0, 1fr); } }

/* arriba de Noticias, sus secciones y ámbitos: una línea fina de Doble Click con el campo del mail */
.dc-linea { flex: 1 0 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(300px, 420px); align-items: center; gap: 8px 18px; padding: 10px 12px 10px 22px; border: 1px solid var(--dc-borde); border-radius: 22px; background: var(--dc-fondo); color: #d9d5cf; font-size: 0.94rem; line-height: 1.4; }
.dc-linea__marca { display: inline-flex; align-items: center; gap: 0.2em; font: 800 1.2rem/1 var(--titulo); letter-spacing: -0.04em; color: #ffffff; white-space: nowrap; }
.dc-linea__marca em { font-style: normal; color: #ff7a45; }
.dc-linea__alta { min-width: 0; }
.dc-linea form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; }
.dc-linea input { padding: 9px 16px; background: #1c1c1c; border-color: #343434; color: #ffffff; }
.dc-linea input::placeholder { color: #8d8a85; }
.dc-linea .btn { padding: 10px 18px; white-space: nowrap; }
.dc-linea .error { grid-column: 1 / -1; margin: 0; max-width: none; font-size: 0.82rem; color: #ff8a80; }
.dc-linea .error:empty { display: none; }
.dc-linea .aviso-datos { grid-column: 1 / -1; margin: 0 0 0 16px; max-width: none; font-size: 0.74rem; color: #8d8a85; }
.dc-linea .aviso-datos a { color: inherit; }
.dc-linea .estado-form { margin: 0; max-width: none; color: #ffffff; }
@media (max-width: 1000px) { .dc-linea { grid-template-columns: auto minmax(0, 1fr); } .dc-linea__alta { grid-column: 1 / -1; } }
@media (max-width: 640px) { .dc-linea { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; border-radius: 16px; } .dc-linea__txt { font-size: 0.9rem; } .dc-linea .aviso-datos { margin-left: 0; } }

/* su página: qué trae y todas las ediciones */
.dc-pagina { padding-block: 36px 24px; display: grid; gap: 56px; }
.dc__caja--hero .dc__marca { font-size: clamp(3rem, 2rem + 4vw, 5.2rem); }
.dc-que h2, .dc-ediciones h2 { margin: 0 0 18px; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
.dc-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.dc-tres div { display: grid; align-content: start; gap: 6px; padding-top: 14px; border-top: 2px solid var(--ink); }
.dc-tres b { font-size: 1.08rem; }
.dc-tres p { margin: 0; color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; }
.dc-ediciones__lista { margin: 0; padding: 0; list-style: none; }
.dc-edicion { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); }
.dc-edicion > a { display: grid; align-content: start; gap: 4px; }
.dc-edicion__n { font: 800 1.9rem/1 var(--titulo); letter-spacing: -0.04em; }
.dc-edicion__f { font-size: 0.88rem; color: var(--ink-3); }
.dc-edicion > a:hover .dc-edicion__n { color: var(--acento-texto); }
.dc-edicion ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--ink-2); }
.dc-edicion--prox .dc-edicion__n { color: var(--ink-3); }
@media (max-width: 860px) {
  .dc-tres, .dc-edicion { grid-template-columns: minmax(0, 1fr); }
  .dc-edicion { gap: 8px; }
}

/* una edición */
.dc-ed { max-width: 860px; padding-block: 28px 8px; }
.dc-ed__volver { margin: 0 0 14px; font-size: 0.92rem; }
.dc-ed__volver a { color: var(--acento-texto); font-weight: 600; }
.dc-ed__cab { display: grid; gap: 10px; padding: clamp(22px, 4vw, 40px); border: 1px solid var(--dc-borde); border-radius: 22px; background: var(--dc-fondo); color: #ffffff; }
.dc-ed__fecha { font-size: 0.85rem; color: #a9a9a4; }
.dc-ed__cab .dc__marca small { margin-left: 0.15em; font: 700 0.5em/1 var(--titulo); letter-spacing: -0.02em; color: #a9a9a4; }
.dc-ed__cab p { margin: 0; color: #d9d5cf; }
.dc-ed__cab .dc-ed__aviso { font-size: 0.9rem; color: #ff7a45; }
.dc-ed__ind { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.dc-ed__ind li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--bg-2); }
.dc-ed__ind span { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.dc-ed__ind b { font-size: 1.1rem; }
.dc-ed__ind small { font-size: 0.78rem; color: var(--ink-3); }
.dc-ed__notas { list-style: none; margin: 8px 0 0; padding: 0; }
.dc-ed__notas > li { display: grid; justify-items: start; gap: 8px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.dc-ed__notas h2 { margin: 0; font-size: clamp(1.25rem, 0.6vw + 1rem, 1.55rem); line-height: 1.25; }
.dc-ed__notas h2 a:hover { color: var(--acento-texto); }
.dc-ed__notas p { margin: 0; max-width: 70ch; color: var(--ink-2); }
.dc-ed__notas .dc-ed__meta { font-size: 0.86rem; color: var(--ink-3); }
.dc-ed__meta a { color: var(--acento-texto); font-weight: 600; }
.dc-ed__nav { display: flex; justify-content: space-between; gap: 16px; padding: 22px 0 8px; font-size: 0.92rem; font-weight: 600; }
.dc-ed__nav a { color: var(--acento-texto); }

/* ── Nota ─────────────────────────────────────────────────────────────── */

.nota { padding-top: 48px; }
.nota__cab { max-width: 820px; margin-inline: auto; display: grid; gap: 18px; justify-items: start; }
.nota__cab h1 { margin: 0; font-size: var(--titulo-grande); line-height: 1.04; }
.nota__bajada { margin: 0; font-size: clamp(1.12rem, 0.5vw + 1rem, 1.3rem); line-height: 1.6; color: var(--ink-2); }
.nota__firma { margin: 6px 0 0; display: flex; align-items: center; gap: 12px; font-size: 0.88rem; color: var(--ink-3); line-height: 1.45; }
.nota__firma b { color: var(--ink); font-weight: 500; }
.nota__avatar svg { width: 34px; height: 34px; display: block; }
.nota__avatar rect { fill: #ef5a24; }
.nota__avatar path { fill: #fff; }
.nota__foto { margin: 40px 0 0; }
.nota__foto .media { aspect-ratio: 16 / 8; }
.nota__foto figcaption { padding-top: 10px; font-size: 0.78rem; color: var(--ink-3); }
.nota__foto figcaption a { text-decoration: underline; text-underline-offset: 3px; }
.nota__cuerpo { display: grid; grid-template-columns: minmax(0, 680px) minmax(0, 300px); justify-content: space-between; gap: clamp(32px, 5vw, 80px); margin-top: 48px; }
.claves h2 { margin: 0 0 4px; font-size: 0.8rem; font-family: var(--texto); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.claves ol { list-style: none; margin: 0; padding: 0; counter-reset: c; }
.claves li { counter-increment: c; display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 20px 0; font-size: 1.12rem; line-height: 1.6; border-bottom: 1px solid var(--line); }
.claves li::before { content: counter(c, decimal-leading-zero); font: 600 0.9rem/1.9 var(--titulo); color: var(--acento-texto); }
.fuente { margin-top: 28px; display: grid; gap: 10px; justify-items: start; font-size: 0.88rem; color: var(--ink-3); }
.aside-herr { position: sticky; top: 76px; align-self: start; display: grid; gap: 12px; justify-items: start; padding-top: 18px; border-top: 1px solid var(--ink); }
.aside-herr .herr-card__icono { margin-bottom: 4px; }
.aside-herr h2 { margin: 0; font-size: 1.45rem; line-height: 1.12; }
.aside-herr p { margin: 0; color: var(--ink-2); font-size: 0.95rem; }

/* ── Calculadora ──────────────────────────────────────────────────────── */

.calc { padding-top: 40px; }
.calc__cab { display: grid; gap: 12px; justify-items: start; max-width: 760px; }
.calc__cab h1 { margin: 0; font-size: var(--titulo-grande); line-height: 1.04; }
.calc__cab p { margin: 0; font-size: 1.1rem; color: var(--ink-2); max-width: 60ch; }
.tablero { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); margin-top: 36px; align-items: start; }
.controles { display: grid; gap: 28px; }
.ctrl { display: grid; gap: 12px; }
.ctrl__cab { display: flex; justify-content: space-between; margin: 0; font-weight: 500; font-size: 0.92rem; }
.ctrl__cab span + span { color: var(--ink-3); font-size: 0.8rem; }
.formas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.forma { aspect-ratio: 1; background: var(--bg-2); border: 0; border-radius: 10px; display: grid; place-items: center; cursor: pointer; padding: 0; transition: background 0.2s; }
.forma svg { width: 58%; height: 58%; }
.forma svg path { fill: var(--ink-3); fill-rule: evenodd; transition: fill 0.2s; }
.forma:hover svg path { fill: var(--ink); }
.forma[aria-pressed="true"] { background: var(--ink); }
.forma[aria-pressed="true"] svg path { fill: var(--bg); }
.nombre-forma { margin: 2px 0 0; font: 700 1.2rem/1.1 var(--titulo); letter-spacing: -0.02em; }
/* Lo que arma calculadora.js (las 12 formas, el nombre y las medidas) tiene su lugar desde antes de que corra:
   si no, en un celular lento «3. Tu pedido» salta hacia abajo al cargar (Google lo mide como CLS) */
#formas:empty::before, #formas:empty::after { content: ""; aspect-ratio: 1; }
#formas:empty::after { grid-row: 2; }
#nombre-forma:empty::before { content: "\a0"; }
#campos:empty { min-height: 241px; }

.medida { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; border-bottom: 1px solid var(--line); padding: 6px 0; transition: border-color 0.2s; }
.medida:focus-within { border-bottom-color: var(--ink); }
.medida .letra { grid-row: 1 / 3; font: 600 1.05rem/1 var(--titulo); color: var(--acento-texto); }
.medida label { grid-column: 2 / 4; grid-row: 1; font-size: 0.76rem; color: var(--ink-3); }
.medida input, .medida select { grid-column: 2; grid-row: 2; border: 0; background: transparent; font: 600 1.25rem/1.2 var(--texto); padding: 0 0 2px; width: 100%; min-width: 0; border-radius: 0; }
.medida input:focus-visible, .medida select:focus-visible { outline: none; }
.medida:focus-within { outline: 2px solid var(--acento); outline-offset: 4px; border-radius: 4px; }
.medida select { font-size: 0.95rem; font-weight: 500; cursor: pointer; padding: 2px 0 4px; }
.medida select option { background: var(--bg); color: var(--ink); }
.medida .u { grid-column: 3; grid-row: 2; font-size: 0.82rem; color: var(--ink-3); }
.medida.calculado input { color: var(--acento-texto); }
.medida.calculado label::after { content: " · calculado"; }
.medida.sin-letra { grid-template-columns: minmax(0, 1fr) auto; }
.medida.sin-letra label { grid-column: 1 / 3; }
.medida.sin-letra :is(input, select) { grid-column: 1; }
.medida.sin-letra .u { grid-column: 2; }
.equivale { margin: -2px 0 0; font-size: 0.9rem; color: var(--ink-3); line-height: 1.45; }
.equivale b { color: var(--acento-texto); font-weight: 600; }
.equivale:empty { display: none; }
.calc-error { margin: 0; font-size: 0.86rem; color: #d92d20; }

.lamina { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.lamina__top { display: flex; justify-content: space-between; gap: 10px; padding: 14px 18px 0; font-size: 0.78rem; color: var(--ink-3); }
.lamina__top b { color: var(--ink); font-weight: 500; }
#dibujo { display: block; width: 100%; height: 100%; min-height: 340px; background-image: linear-gradient(var(--grilla) 1px, transparent 1px), linear-gradient(90deg, var(--grilla) 1px, transparent 1px); background-size: 16px 16px; }
#dibujo .sec { fill: url(#rayado); stroke: var(--ink); stroke-width: 1.6; fill-rule: evenodd; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
#dibujo .eje { stroke: var(--ink-3); stroke-width: 0.8; vector-effect: non-scaling-stroke; fill: none; opacity: 0.6; }
#dibujo .cota line, #dibujo .cota polyline { stroke: var(--cota); stroke-width: 1.1; vector-effect: non-scaling-stroke; fill: none; }
#dibujo .cota path { fill: var(--cota); }
#dibujo .cota text { fill: var(--cota); font-family: var(--texto); font-weight: 600; }
#dibujo .aviso { fill: var(--ink-2); font-family: var(--texto); }
#rayado line { stroke: var(--ink); vector-effect: non-scaling-stroke; stroke-width: 0.5; opacity: 0.35; }
.animar .cota line, .animar .cota polyline { stroke-dasharray: var(--l, 400); animation: trazar 0.7s var(--ease) both; }
.animar .cota text, .animar .cota path { animation: aparecer 0.5s 0.35s var(--ease) both; }
.animar .sec { animation: aparecer 0.45s var(--ease) both; }
@keyframes trazar { from { stroke-dashoffset: var(--l, 400); } }
@keyframes aparecer { from { opacity: 0; } }

/* Lápiz: editar el dibujo moviendo sus caras */
.lamina { grid-template-rows: auto minmax(0, 1fr) auto auto; }
.lamina__lienzo { position: relative; display: grid; min-height: 0; }
.lapiz-boton { position: absolute; top: 12px; left: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: 500 0.86rem/1 var(--texto); cursor: pointer; transition: border-color 0.2s; }
.lapiz-boton svg { width: 17px; height: 17px; color: var(--acento-texto); }
.lapiz-boton:hover { border-color: var(--ink); }
.lapiz-boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.lapiz-aviso { position: absolute; left: 14px; right: 14px; bottom: 10px; margin: 0; font-size: 0.82rem; color: var(--ink-2); pointer-events: none; }
.lamina.editando #dibujo { touch-action: none; -webkit-user-select: none; user-select: none; }
.lamina.editando #dibujo:focus { outline: none; }
.lamina.editando #dibujo:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
#dibujo .lapiz line { vector-effect: non-scaling-stroke; stroke-linecap: round; fill: none; }
#dibujo .lapiz .cara-sel { stroke: var(--cota); stroke-width: 3.5; }
#dibujo .lapiz .cara-hov { stroke: var(--cota); stroke-width: 2.5; opacity: 0.55; }
#dibujo .lapiz .grip { fill: var(--bg); stroke: var(--cota); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
#dibujo .lapiz .grip--sel { fill: var(--cota); }
#dibujo .lapiz .medida line { stroke: var(--cota); stroke-width: 1.2; }
#dibujo .lapiz .medida text { fill: var(--cota); font-family: var(--texto); font-weight: 700; paint-order: stroke; stroke: var(--bg); stroke-linejoin: round; }
.lapiz-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--bg-2); }
.lapiz-ayuda { flex: 1 1 260px; margin: 0; font-size: 0.88rem; color: var(--ink-2); }
.lapiz-medida { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.lapiz-medida label { font-size: 0.8rem; color: var(--ink-3); }
.lapiz-paso { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); }
.lapiz-paso:focus-within { outline: 2px solid var(--acento); outline-offset: 2px; }
.lapiz-paso button { width: 38px; height: 38px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: 500 1.15rem/1 var(--texto); cursor: pointer; }
.lapiz-paso button:hover { background: var(--bg-2); }
.lapiz-paso input { width: 4.4em; padding: 0; border: 0; background: none; color: var(--acento-texto); font: 700 1.05rem/1 var(--texto); text-align: right; }
.lapiz-paso input:focus-visible { outline: none; }
.lapiz-paso span { margin: 0 4px 0 3px; font-size: 0.8rem; color: var(--ink-3); }
.lapiz-acc { min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: 500 0.84rem/1 var(--texto); cursor: pointer; transition: border-color 0.2s; }
.lapiz-acc:hover:not(:disabled) { border-color: var(--ink); }
.lapiz-acc:disabled { opacity: 0.45; cursor: default; }
.lapiz-acc:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.lapiz-global { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.lapiz-listo { min-height: 38px; padding: 0 20px; }
.dib-datos { display: grid; margin: 0; }
.dib-datos div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.dib-datos dt { font-size: 0.82rem; color: var(--ink-3); }
.dib-datos dd { margin: 0; font-weight: 600; }
.dib-nota { margin: 0; font-size: 0.84rem; color: var(--acento-texto); }
.dib-seguir { justify-self: start; }
/* en el celular, Deshacer, Volver al original y Listo entran en una sola fila */
@media (max-width: 420px) {
  .lapiz-barra { gap: 10px 12px; padding: 12px 14px; }
  .lapiz-acc { padding: 0 11px; font-size: 0.8rem; }
  .lapiz-listo { padding: 0 15px; }
}
.rotulo-calc { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); }
.rotulo-calc > div { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 12px 18px; }
.rotulo-calc dt { font-size: 0.74rem; color: var(--ink-3); }
.rotulo-calc dd { margin: 0; font-weight: 500; font-size: 0.95rem; overflow-wrap: anywhere; }
.rotulo-calc .grande { grid-column: span 2; padding: 18px; border-bottom: 1px solid var(--line); }
.rotulo-calc .grande + .grande { border-left: 1px solid var(--line); }
.rotulo-calc .grande dd { font: 700 clamp(1.9rem, 2.6vw, 2.7rem)/1 var(--titulo); letter-spacing: -0.035em; margin-top: 6px; }
.rotulo-calc .grande dd small { font: 400 0.88rem var(--texto); margin-left: 6px; color: var(--ink-3); letter-spacing: 0; }
.rotulo-calc .total dd { color: var(--acento); }

/* Llamado a la acción de cada herramienta: tarjeta con fondo naranja suave para que no pase de largo */
.cta-calc { display: grid; grid-template-columns: minmax(0, 1fr) fit-content(50%); align-items: center; gap: 18px 28px; margin-top: 40px; padding: 30px 34px; border: 1px solid var(--line); border-radius: calc(var(--r) + 6px); background: var(--bg-2); }
@supports (background: color-mix(in srgb, red 10%, white)) {
  .cta-calc { border-color: color-mix(in srgb, var(--acento) 45%, var(--line)); background: color-mix(in srgb, var(--acento) 9%, var(--bg)); }
}
.cta-calc__icono { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: var(--acento-texto); color: var(--acento-ink); }
.cta-calc__icono svg { width: 30px; height: 30px; }
.cta-calc h2 { margin: 0; font-size: clamp(1.5rem, 1.4vw + 1rem, 2.1rem); line-height: 1.1; }
.cta-calc p { margin: 6px 0 0; color: var(--ink-2); max-width: 60ch; }
/* en las herramientas: ícono, texto y debajo del texto las vías de consulta */
.cta-calc--herr { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 18px 24px; }
.cta-calc__acciones { grid-column: 2; display: grid; gap: 10px; justify-items: start; }
.cta-calc .cta-calc__nota { margin: 0; font-size: 0.82rem; color: var(--ink-3); }
.btn > svg { width: 18px; height: 18px; flex: none; }
.btn--grande { padding: 16px 28px; font-size: 1rem; font-weight: 600; }
@media (max-width: 980px) {
  .cta-calc { grid-template-columns: minmax(0, 1fr); padding: 24px 22px; }
  .cta-calc--herr { grid-template-columns: auto minmax(0, 1fr); }
  .cta-calc__acciones { grid-column: 1 / -1; justify-items: stretch; }
  .cta-calc__botones .btn { flex: 1 1 220px; }
}
@media (max-width: 480px) { .cta-calc__icono { width: 46px; height: 46px; border-radius: 14px; } .cta-calc__icono svg { width: 24px; height: 24px; } }

/* Botón flotante: aparece cuando ya se usó la herramienta y el llamado del final no está a la vista */
.cta-flotante { position: fixed; left: 0; right: 0; width: max-content; max-width: calc(100vw - 32px); margin-inline: auto; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; align-items: center; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.4); animation: subir 0.3s var(--ease); }
.cta-flotante .btn { padding: 13px 20px; }
.cta-flotante__cerrar { width: 36px; height: 36px; border: 0; border-radius: 999px; background: none; color: var(--ink-3); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.cta-flotante__cerrar:hover { background: var(--bg-2); color: var(--ink); }
@media (max-width: 640px) { .cta-flotante { left: 16px; right: 16px; width: auto; max-width: none; margin-inline: 0; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } .cta-flotante .btn { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .cta-flotante { animation: none; } }

/* Flecha para subir (assets/site.js): en las páginas largas, abajo a la derecha. En la compu va arriba de Lingo;
   en el celular, a su izquierda (o en su lugar si lo ocultaron), y sobre el botón flotante de WhatsApp si está */
.ir-arriba { position: fixed; right: 20px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 41; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); box-shadow: 0 14px 36px -14px rgba(0, 0, 0, 0.45); cursor: pointer; animation: subir 0.25s var(--ease); transition: transform 0.2s var(--ease), border-color 0.2s; }
.ir-arriba:hover { transform: translateY(-2px); border-color: var(--ink); }
.ir-arriba svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .ir-arriba { right: 74px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
  body:has(.cta-flotante) .ir-arriba { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  html.al-oculto .ir-arriba { right: 40px; }
}
@media (prefers-reduced-motion: reduce) { .ir-arriba { animation: none; transition: none; } }
@media print { .ir-arriba { display: none; } }

/* "Volver" (las comparativas): arriba vuelve a la página anterior del sitio; abajo lleva al índice */
.volver { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin: 0 0 22px; padding: 7px 14px 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: border-color 0.2s, color 0.2s; }
.volver:hover { border-color: var(--ink); color: var(--ink); }
.volver svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.volver--abajo { margin: 28px 0 0; }
.consulta { grid-column: 1 / -1; display: grid; gap: 10px; }
.consulta textarea { width: 100%; min-height: 170px; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; font: 400 0.92rem/1.6 var(--texto); background: var(--bg-2); color: var(--ink); resize: vertical; }
.consulta .fila { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 0.84rem; color: var(--ink-3); }
.calc__nota { margin: 16px 0 0; font-size: 0.82rem; color: var(--ink-3); max-width: 100ch; }

/* ── Formularios ──────────────────────────────────────────────────────── */

input, textarea { font: 400 1rem var(--texto); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 12px 18px; width: 100%; }
textarea { border-radius: var(--r); min-height: 104px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, textarea:focus { border-color: var(--ink); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
[aria-invalid="true"] { border-color: #d92d20; }
.error { color: #d92d20; font-size: 0.86rem; min-height: 1.2em; margin: 0; }
.estado-form { margin: 12px 0 0; color: var(--ink-2); }
.estado-form[hidden] { display: none; }

/* ── Pie ──────────────────────────────────────────────────────────────── */

.pie { margin-top: clamp(72px, 9vw, 120px); border-top: 1px solid var(--line); padding-block: 44px 56px; }
.pie__in { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.pie p { margin: 14px 0 0; color: var(--ink-3); font-size: 0.92rem; max-width: 46ch; }
/* Instagram, debajo del logo */
.pie__red { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--ink-2); font-size: 0.92rem; font-weight: 600; text-decoration: none; }
.pie__red svg { width: 22px; height: 22px; flex: none; }
.pie__red:hover, .pie__red:focus-visible { color: var(--acento); }
.pie h2 { margin: 0 0 12px; font-size: 0.8rem; font-family: var(--texto); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.94rem; }
.pie a:hover { color: var(--acento); }

/* ── Movimiento ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.25s; }

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .herr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .herr-card:nth-child(n) { padding-left: 24px; border-left: 1px solid var(--line); }
  .herr-card:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .newsletter, .nota__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .aside-herr { position: static; }
  .tablero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .top__in { gap: 12px; }
  .menu { display: none; }
  .chip-nav--herr { display: inline-flex; }
  .grilla, .herr-grid { grid-template-columns: minmax(0, 1fr); }
  .herr-card:nth-child(n) { padding-left: 0; border-left: 0; }
  .herr-grid .herr-card { min-height: 0; }
  .newsletter form { grid-template-columns: minmax(0, 1fr); }
  .pie__in { grid-template-columns: minmax(0, 1fr); }
  .proyecto { grid-template-columns: minmax(0, 1fr); }
  .rotulo-calc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rotulo-calc .grande { grid-column: span 2; }
  .rotulo-calc .grande + .grande { border-left: 0; }
  .nota__foto .media { aspect-ratio: 4 / 3; }
}

/* ── Herramientas de datos (aleaciones, temples, materiales, dureza) ──── */

.herr-datos .paso { margin-top: 32px; display: grid; gap: 12px; }
.paso__tit { margin: 0; font-size: 0.92rem; font-weight: 500; }
.paso__tit span { color: var(--ink-3); font-weight: 400; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { border: 0; background: var(--bg-2); color: var(--ink-2); padding: 9px 16px; border-radius: 999px; font-size: 0.92rem; cursor: pointer; transition: background 0.2s, color 0.2s; }
.pill:hover { color: var(--ink); }
.pill[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.recomienda { margin: 0; max-width: 70ch; color: var(--ink-2); }
.recomienda b { color: var(--acento-texto); font-weight: 600; }

.tabla-scroll { position: relative; overflow-x: auto; margin-top: 32px; } /* relative: los textos ocultos (.oculto) de la tabla no se escapan y ensanchan la página en el celular */
.tabla-comp { width: 100%; border-collapse: collapse; min-width: 560px; }
.tabla-comp th, .tabla-comp td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); }
.tabla-comp thead th { vertical-align: bottom; border-bottom: 1px solid var(--ink); padding-bottom: 12px; }
.tabla-comp tbody th { font-weight: 400; font-size: 0.88rem; color: var(--ink-3); width: 22%; }
.tabla-comp td { font-size: 0.95rem; font-weight: 500; }
.tabla-comp__alea { display: block; font: 700 1.6rem/1 var(--titulo); letter-spacing: -0.03em; }
.tabla-comp thead small { display: block; margin-top: 4px; font-size: 0.78rem; font-weight: 400; color: var(--ink-3); }
.tabla-comp .chico { font-size: 0.88rem; font-weight: 400; color: var(--ink-2); line-height: 1.5; }
.no-hab { font-size: 0.84rem; font-weight: 400; color: var(--ink-3); }
.barra { display: grid; gap: 6px; }
.barra__txt { font-weight: 600; }
.barra__pista { height: 4px; border-radius: 4px; background: var(--bg-2); overflow: hidden; max-width: 220px; }
.barra__pista span { display: block; height: 100%; background: var(--ink); border-radius: 4px; transition: width 0.5s var(--ease); }
.puntos { display: inline-flex; gap: 4px; }
.puntos i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.puntos i.si { background: var(--acento); }

.glosario { margin-top: 28px; display: grid; gap: 6px; font-size: 0.9rem; color: var(--ink-2); max-width: 80ch; }
.glosario p { margin: 0; }
.glosario b { display: inline-block; min-width: 64px; color: var(--ink); }

.destacados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; border-top: 1px solid var(--line); }
.destacados > div { padding: 22px 20px 22px 0; display: grid; gap: 6px; }
.destacados > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.destacados b { font: 700 clamp(2rem, 3vw, 3rem)/1 var(--titulo); letter-spacing: -0.04em; color: var(--acento); }
.destacados span { font-size: 0.92rem; color: var(--ink-2); }

.dureza { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: 36px; align-items: start; }
.dureza__entrada { display: grid; gap: 16px; }
.dureza__res { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); }
.dureza__res > div { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.dureza__res dt { font-size: 0.76rem; color: var(--ink-3); }
.dureza__res dd { margin: 0; font: 700 1.6rem/1 var(--titulo); letter-spacing: -0.03em; }
.dureza__res .principal { grid-column: span 2; }
.dureza__res .principal dd { font-size: 3rem; color: var(--acento); }
.dureza__res .medida-ok dt::after { content: " · medida"; color: var(--acento); }
.escala-hb { margin-top: 40px; display: grid; gap: 14px; }
.escala-hb__barra { position: relative; height: 120px; margin-inline: 12px; }
.escala-hb__barra::before { content: ""; position: absolute; left: 0; right: 0; top: 60px; height: 2px; background: var(--line); }
.escala-hb__barra .ref, .escala-hb__barra .tu { position: absolute; top: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; font-size: 0.74rem; color: var(--ink-2); white-space: nowrap; line-height: 1.2; }
.escala-hb__barra .ref i, .escala-hb__barra .tu i { order: 3; width: 2px; height: 14px; background: var(--ink-3); margin-top: 6px; }
.escala-hb__barra .ref { top: 12px; }
.escala-hb__barra .ref.abajo { top: 59px; }
.escala-hb__barra .ref.abajo i { order: -1; margin: 0 0 6px; }
.escala-hb__barra small { color: var(--ink-3); }
.escala-hb__barra .tu { top: 38px; color: var(--acento); font-weight: 600; z-index: 1; }
.escala-hb__barra .tu i { order: -1; width: 12px; height: 12px; border-radius: 50%; background: var(--acento); margin: 0 0 4px; box-shadow: 0 0 0 4px var(--bg); }
.escala-hb__barra .tu small { color: var(--acento); }
.escala-hb__barra .lim { position: absolute; top: 100px; font-size: 0.72rem; color: var(--ink-3); }
.escala-hb__barra .lim.izq { left: 0; }
.escala-hb__barra .lim.der { right: 0; }
.tabla-norma { margin-top: 28px; }
.tabla-norma summary { cursor: pointer; font-size: 0.92rem; font-weight: 500; }
.tabla-norma .tabla-comp { min-width: 640px; }
.tabla-norma .tabla-comp td, .tabla-norma .tabla-comp th { padding: 8px 12px 8px 0; font-size: 0.88rem; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .destacados { grid-template-columns: minmax(0, 1fr); }
  .destacados > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .dureza { grid-template-columns: minmax(0, 1fr); }
  .dureza__res { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .escala-hb__barra { overflow: visible; font-size: 0.7rem; }
}

/* ── Buscador de perfiles ─────────────────────────────────────────────── */

.buscador { margin-top: 32px; }
.buscador input { font-size: 1.15rem; padding: 16px 22px; }
#t-buscador .pills { margin-top: 16px; }
.b-cat { display: none; }
@media (max-width: 640px) {
  #t-buscador #b-familias { display: none; }
  .b-cat { display: grid; gap: 6px; margin-top: 14px; font-size: 0.86rem; color: var(--ink-3); }
  .b-cat select { padding: 11px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: 500 1rem var(--texto); }
}
#t-buscador .pill { font-size: 0.85rem; padding: 7px 13px; }
.b-ayuda { margin: 22px 0 0; color: var(--ink-2); }
.b-ayuda span { color: var(--ink-3); }
/* Las familias, dibujadas como en el índice de Extruidos: cada una filtra la tabla (assets/buscador.js) */
.b-fams { margin-top: 8px; }
.b-fams[hidden] { display: none; }
#t-buscador .b-fams button { width: 100%; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
#t-buscador .ext-formas button { display: grid; justify-items: start; gap: 3px; height: 100%; padding: 14px 12px 16px; border-radius: var(--r); transition: background 0.2s, box-shadow 0.2s; }
#t-buscador .ext-formas button:hover { background: var(--bg-2); }
#t-buscador .ext-formas button:hover .silueta path { stroke: var(--acento-texto); fill: var(--bg); }
#t-buscador .ext-formas button[aria-pressed="true"] { background: var(--bg-2); box-shadow: inset 0 0 0 1.5px var(--acento-texto); }
#t-buscador .ext-formas button[aria-pressed="true"] .silueta path { stroke: var(--acento-texto); fill: color-mix(in srgb, var(--acento) 14%, var(--bg)); }
#t-buscador .ext-lineas button { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
#t-buscador .ext-lineas button:hover b, #t-buscador .ext-lineas button[aria-pressed="true"] b { color: var(--acento-texto); }
#t-buscador .ext-lineas button[aria-pressed="true"] b { font-weight: 700; }
#b-ayuda { scroll-margin-top: 120px; }
.b-todas { margin-left: 6px; padding: 0; border: 0; background: none; color: var(--acento-texto); font: 600 0.95rem var(--texto); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#t-buscador .tabla-scroll { margin-top: 12px; }
.tabla-perfiles { min-width: 640px; }
.tabla-perfiles th, .tabla-perfiles td { vertical-align: middle; padding-block: 11px; }
.tabla-perfiles thead th { font-size: 0.78rem; font-weight: 400; color: var(--ink-3); }
.tabla-perfiles .num { text-align: right; white-space: nowrap; }
.tabla-perfiles small { color: var(--ink-3); font-weight: 400; }
.tabla-perfiles .cod { font-weight: 600; }
/* Cada fila se marca al pasar el mouse; las que tienen ficha se abren tocando cualquier parte (site.js) o el "+ info" */
.tabla-perfiles th:first-child, .tabla-perfiles td:first-child { padding-left: 12px; }
.tabla-perfiles th:last-child, .tabla-perfiles td:last-child { padding-right: 12px; }
.tabla-perfiles tbody tr { transition: background-color 0.15s; }
.tabla-perfiles tbody tr:hover { background: var(--bg-2); }
.tabla-perfiles tr[data-href] { cursor: pointer; }
.tabla-perfiles .mas-info { display: inline-block; padding: 4px 0; font-size: 0.86rem; font-weight: 600; color: var(--acento-texto); white-space: nowrap; text-underline-offset: 3px; }
.tabla-perfiles tr:hover .mas-info, .tabla-perfiles .mas-info:focus-visible { text-decoration: underline; }
.tabla-perfiles .b-acciones { text-align: right; white-space: nowrap; }
.tabla-perfiles .b-acciones .mas-info { margin-right: 14px; }
.tabla-perfiles tbody tr:hover .agregar:not(.en) { background: var(--bg); }
.meds { white-space: nowrap; }
.med { margin-right: 12px; }
.med i { font-style: normal; font-size: 0.72rem; color: var(--acento); margin-right: 4px; }
.agregar { border: 0; background: var(--bg-2); color: var(--ink); padding: 7px 14px; border-radius: 999px; font-size: 0.85rem; cursor: pointer; white-space: nowrap; transition: background 0.2s, color 0.2s; }
.agregar:hover { background: var(--ink); color: var(--bg); }
.agregar.en { background: var(--acento); color: var(--acento-ink); }
.b-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; font-size: 0.9rem; color: var(--ink-3); }
.b-cuantos { font-variant-numeric: tabular-nums; }
.b-pagina { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.b-pagina select { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: 500 0.9rem var(--texto); }
.pedido { position: sticky; bottom: 12px; z-index: 15; margin-top: 28px; padding: 20px 22px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--ink); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.35); display: grid; gap: 12px; }
.pedido__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pedido__plegar { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.pedido__plegar #p-total { margin-left: auto; font: 600 1rem var(--texto); letter-spacing: 0; white-space: nowrap; }
.pedido__flecha { flex: none; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform 0.25s var(--ease); }
.pedido.plegado .pedido__flecha { transform: rotate(-135deg) translate(-3px, 0); }
.pedido__cuerpo { display: grid; gap: 12px; }
.pedido.plegado .pedido__cuerpo { display: none; }
.pedido__cab h2 { width: 100%; }
.pedido h2 { margin: 0; font-size: 1.3rem; }
#p-total { color: var(--acento-texto); font-weight: 600; }
#p-lista { list-style: none; margin: 0; padding: 0; display: grid; max-height: 34vh; overflow-y: auto; }
#p-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto 80px 28px; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 0.92rem; }
#p-lista .num { text-align: right; }
.p-cant { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 0.85rem; }
.p-cant input { width: 70px; padding: 6px 10px; text-align: right; }
.quitar { border: 0; background: none; font-size: 1.3rem; line-height: 1; color: var(--ink-3); cursor: pointer; }
.quitar:hover { color: var(--acento); }
.pedido__acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.catalogo-pedir { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.catalogo-pedir form { display: grid; gap: 10px; }
.catalogo-pedir__t { display: grid; gap: 2px; margin: 0; }
.catalogo-pedir__t span { font-size: 0.86rem; color: var(--ink-3); }
.catalogo-pedir__fila { display: flex; flex-wrap: wrap; gap: 8px; }
.catalogo-pedir__fila input { flex: 1 1 220px; min-width: 0; padding: 11px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: 400 0.95rem var(--texto); }
.catalogo-pedir .estado-form a { font-weight: 600; color: var(--acento-texto); text-decoration: underline; text-underline-offset: 2px; }
.pedido .consulta textarea { min-height: 150px; }
@media (max-width: 640px) {
  #p-lista li { grid-template-columns: minmax(0, 1fr) auto; }
  #p-lista li > .num { grid-column: 1; }
}

/* ── ¿Te conviene el aluminio? ────────────────────────────────────────── */

.pills--chicas .pill { font-size: 0.85rem; padding: 7px 13px; }
.pieza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); margin-top: 8px; align-items: start; }
.pieza__form { display: grid; gap: 14px; }
.pieza__form .paso { margin-top: 18px; }
.pieza__campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; }
.pieza__res { position: sticky; top: 76px; margin-top: 18px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r); display: grid; gap: 14px; }
.pieza__cifras { display: grid; grid-template-columns: 1fr 1fr; margin: 0; gap: 16px; }
.pieza__cifras dt { font-size: 0.8rem; color: var(--ink-3); }
.pieza__cifras dd { margin: 4px 0 0; font: 700 clamp(1.8rem, 2.6vw, 2.6rem)/1 var(--titulo); letter-spacing: -0.035em; color: var(--ink-3); }
.pieza__cifras .al dd { color: var(--acento); }
.pieza__titular { margin: 0; font-size: 1.05rem; }
.pieza__titular b { color: var(--acento-texto); }
.pieza__cat, .pieza__rig p { margin: 0; font-size: 0.94rem; color: var(--ink-2); }
.pieza__rig { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.razones { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--ink); }
.razones:empty { display: none; }
.razones h2 { margin: 0 0 8px; font-size: clamp(1.6rem, 1.4vw + 1rem, 2.2rem); }
.razones ol { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.razones li { counter-increment: r; display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.razones li::before { content: counter(r, decimal-leading-zero); grid-row: 1 / 3; font: 600 0.9rem/1.7 var(--titulo); color: var(--acento); }
.razones li b { font-weight: 600; }
.razones li span { color: var(--ink-2); font-size: 0.95rem; }
.razones__cuidado { align-self: start; padding: 20px; border-radius: var(--r); background: var(--bg-2); }
.razones__cuidado ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 10px; font-size: 0.9rem; color: var(--ink-2); }
.ficha-plegable { margin-top: 64px; border: 1px solid var(--line); border-radius: var(--r); }
.ficha-plegable > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; cursor: pointer; list-style: none; border-radius: var(--r); }
.ficha-plegable > summary::-webkit-details-marker { display: none; }
.ficha-plegable > summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.ficha-plegable__t { display: grid; gap: 4px; }
.ficha-plegable__t b { font: 700 clamp(1.4rem, 1.2vw + 1rem, 1.9rem)/1.1 var(--titulo); letter-spacing: -0.025em; }
.ficha-plegable__t span { font-size: 0.95rem; color: var(--ink-3); }
.ficha-plegable__ver { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.9rem; font-weight: 600; transition: border-color 0.2s; }
.ficha-plegable__ver::before { content: "Ver la ficha"; }
.ficha-plegable[open] .ficha-plegable__ver::before { content: "Ocultar"; }
.ficha-plegable__ver::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.25s var(--ease), margin 0.25s; }
.ficha-plegable[open] .ficha-plegable__ver::after { margin-top: 3px; transform: rotate(-135deg); }
.ficha-plegable > summary:hover .ficha-plegable__ver { border-color: var(--ink); }
.ficha-plegable > :not(summary) { margin-inline: 24px; }
.ficha-plegable > .destacados { margin-top: 0; }
.ficha-plegable > .calc__nota { margin-bottom: 22px; }
@media (max-width: 640px) {
  .ficha-plegable > summary { padding: 18px; align-items: start; }
  .ficha-plegable > :not(summary) { margin-inline: 18px; }
}
.costo { letter-spacing: 0.1em; font-weight: 600; }
.costo span { opacity: 0.2; }
@media (max-width: 900px) {
  .pieza, .razones { grid-template-columns: minmax(0, 1fr); }
  .pieza__res { position: static; }
}

/* ── Subí tu plano ────────────────────────────────────────────────────── */

.plano { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); margin-top: 36px; align-items: start; }
.plano__carga { display: grid; gap: 14px; }
.pl-zona { display: grid; gap: 6px; place-items: center; text-align: center; padding: 34px 20px; border: 1.5px dashed var(--ink-3); border-radius: var(--r); cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.pl-zona:hover, .pl-zona.arrastrando { border-color: var(--acento); background: var(--bg-2); }
.pl-zona:focus-within { outline: 2px solid var(--acento); outline-offset: 3px; }
.pl-zona b { font-weight: 600; }
.pl-zona span { font-size: 0.85rem; color: var(--ink-3); }
.pl-estado { margin: 0; font-size: 0.86rem; color: var(--ink-3); }
.pl-estado.error { color: #d92d20; }
.pl-opc-pdf { display: grid; gap: 14px; }
.plano__vista { position: relative; border: 1px solid var(--line); border-radius: var(--r); min-height: 420px; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; background-image: linear-gradient(var(--grilla) 1px, transparent 1px), linear-gradient(90deg, var(--grilla) 1px, transparent 1px); background-size: 16px 16px; }
.pl-vacio { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); font-size: 0.95rem; }
.con-dibujo .pl-vacio { display: none; }
#pl-svg { width: 100%; height: 100%; min-height: 360px; display: block; }
#pl-svg .pl-mat { fill: color-mix(in srgb, var(--acento) 16%, transparent); fill-rule: evenodd; }
#pl-svg .pl-borde { fill: transparent; stroke: var(--ink); cursor: pointer; }
#pl-svg .pl-borde:hover { stroke: var(--acento); }
#pl-svg .pl-borde.fuera { stroke: var(--ink-3); stroke-dasharray: 4 3; opacity: 0.6; }
#pl-svg .pl-circ { fill: none; stroke: var(--ink-3); }
#pl-svg .pl-cg circle { fill: var(--acento); }
#pl-svg .pl-cg path { stroke: var(--acento); }
#pl-svg .pl-esp { stroke: #2563eb; stroke-linecap: round; }
#pl-svg .pl-esp-aro { fill: none; stroke: #2563eb; }
#pl-svg .pl-max { fill: color-mix(in srgb, var(--acento) 24%, transparent); stroke: var(--acento); }
.pl-nota { margin: 0; padding: 0 18px; font-size: 0.82rem; color: var(--ink-3); }
.pl-nota:empty { display: none; }
/* en una hoja de plano: elegir otro dibujo (los otros se ven con línea llena; marco, rótulo y textos, punteados) */
.pl-otro { padding: 0; border: 0; background: none; font: inherit; color: var(--acento-texto); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.pl-otro:hover { color: var(--ink); }
#pl-svg .pl-borde.otra { stroke: var(--ink-2); }
.pl-leyenda { margin: 0; padding: 10px 18px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 0.78rem; color: var(--ink-3); }
.pl-leyenda span { display: inline-block; width: 10px; height: 10px; margin-right: -8px; }
.pl-leyenda .l-cg { border-radius: 50%; background: var(--acento); }
.pl-leyenda .l-circ { border: 1px dashed var(--ink-3); border-radius: 50%; }
.pl-leyenda .l-esp { height: 3px; background: #2563eb; }
.pl-leyenda .l-max { border: 1.5px solid var(--acento); border-radius: 50%; background: color-mix(in srgb, var(--acento) 24%, transparent); }
.pl-leyenda b { margin-left: auto; font: 700 1.2rem/1 var(--titulo); color: var(--acento); }
.pl-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 28px 0 0; border-top: 1px solid var(--line); }
.pl-datos > div { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; align-content: start; }
.pl-datos dt { font-size: 0.76rem; color: var(--ink-3); }
.pl-datos dd { margin: 0; font-weight: 600; }
.pl-datos .grande dd { font: 700 clamp(1.7rem, 2.4vw, 2.4rem)/1 var(--titulo); letter-spacing: -0.035em; }
.pl-datos .grande dd small { font: 400 0.85rem var(--texto); color: var(--ink-3); margin-left: 5px; letter-spacing: 0; }
.pl-datos .acento dd { color: var(--acento); }
.pl-datos .grande:nth-child(1) { grid-column: span 2; }
.pl-datos .grande:nth-child(3) { grid-column: span 1; }
@media (max-width: 900px) {
  .plano { grid-template-columns: minmax(0, 1fr); }
  .pl-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-datos .grande:nth-child(n) { grid-column: span 2; }
}


/* ── Subí tu plano: evaluación para extruir ───────────────────────────────────────────────── */

.mt-eval { --luz: var(--bien); margin-top: 28px; border: 1px solid color-mix(in srgb, var(--luz) 45%, var(--line)); border-radius: var(--r); overflow: hidden; }
.mt-eval--ojo { --luz: var(--ojo); }
.mt-eval--mal { --luz: var(--mal); }
.mt-luz { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--luz); }
.mt-eval__cab { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: color-mix(in srgb, var(--luz) 10%, var(--bg)); }
.mt-eval__cab .mt-luz { width: 16px; height: 16px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--luz) 22%, transparent); }
.mt-eval__chip { margin: 0 0 2px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.mt-eval__cab h2 { margin: 0; font-size: clamp(1.3rem, 1vw + 1rem, 1.7rem); line-height: 1.15; text-wrap: balance; }
.mt-filas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mt-fila { --luz: var(--bien); display: flex; gap: 12px; align-items: baseline; padding: 16px 20px; border-top: 1px solid var(--line); }
.mt-fila:nth-child(even) { border-left: 1px solid var(--line); }
.mt-fila--ojo { --luz: var(--ojo); }
.mt-fila--mal { --luz: var(--mal); }
.mt-fila p { margin: 0; }
.mt-fila p:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.mt-fila b { font-weight: 600; }
.mt-fila p:first-child span:not(.oculto) { font-weight: 600; color: var(--luz); font-variant-numeric: tabular-nums; }
.mt-fila p + p { margin-top: 4px; font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); }
.mt-eval__nota { margin: 0; padding: 12px 20px 14px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--ink-3); }
@media (max-width: 760px) {
  .mt-filas { grid-template-columns: minmax(0, 1fr); }
  .mt-fila:nth-child(even) { border-left: 0; }
}

/* ── Preguntas frecuentes y lista de espera ───────────────────────────── */

.faq { padding-top: clamp(48px, 6vw, 72px); display: grid; gap: 0; max-width: 860px; }
.faq h2 { margin: 0 0 12px; font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem); }
/* cada pregunta se abre con un clic (details): se ve solo la pregunta */
.faq > details { border-top: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 1em; font: 400 1.5rem/1 var(--texto); text-align: center; color: var(--ink-3); }
.faq details[open] > summary::after { content: "\2212"; }
.faq summary:hover h3 { color: var(--acento-texto); }
.faq summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; border-radius: 4px; }
.faq h3 { margin: 0; font-size: 1.08rem; }
.faq p { margin: 0 0 18px; color: var(--ink-2); max-width: 72ch; }

/* ── Menú: con cuatro secciones, pasa a la barra de chips antes ──────── */

@media (max-width: 900px) {
  .menu { display: none; }
  .chip-nav--herr { display: inline-flex; }
}

/* ── Indicadores: el tablero del mercado del aluminio (/indicadores/ y sus páginas) ──────────────────────
   Más denso que el resto del sitio, con la misma tipografía y los mismos colores. Las subas y bajas llevan
   flecha y signo además del color (verde y rojo apagados, nada de pantalla de bolsa). */
.tab { padding-bottom: 8px; }
.tab-hero { display: grid; gap: 10px; padding-block: 34px 4px; }
.tab-ceja { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; color: var(--ink-3); }
.tab-pro { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--dc-borde); border-radius: 999px; background: var(--dc-fondo); color: #ffffff; letter-spacing: 0.02em; }
.tab-pro::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #ff7a45; }
.tab-hero h1 { margin: 0; font-size: var(--titulo-grande); line-height: 1.02; }
.tab-bajada { margin: 2px 0 0; max-width: 62ch; font-size: clamp(1.08rem, 0.5vw + 1rem, 1.28rem); }
.tab-segunda { margin: 0; max-width: 72ch; color: var(--ink-2); }
.tab-sincro { margin: 4px 0 0; font-size: 0.84rem; color: var(--ink-3); }
.dato-sube { color: var(--data-up); }
.dato-baja { color: var(--data-down); }
.dato-igual { color: var(--ink-3); }
.dato-sube small, .dato-baja small, .dato-igual small { color: var(--ink-3); }

/* la línea de datos de arriba: en el celu se desliza (sin moverse sola) */
.tk { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.tk__item { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 12px 14px; border-left: 1px solid var(--line); }
.tk__item:first-child { padding-left: 0; border-left: 0; }
.tk__n { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.tk b { font: 700 1.05rem/1.2 var(--titulo); white-space: nowrap; }
.tk__v { font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.tk__v small { font-weight: 400; }
.tk__p { font-size: 0.7rem; color: var(--ink-3); }
@media (max-width: 980px) {
  .tk { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .tk__item { flex: 0 0 auto; min-width: 148px; scroll-snap-align: start; }
}

/* "Hoy, en 30 segundos" */
.tab-pulso { display: grid; gap: 12px; margin-top: 30px; }
.tab-pulso h2 { margin: 0; font-size: clamp(1.45rem, 1vw + 1rem, 1.9rem); }
.tab-pulso__resumen { margin: 0; max-width: 82ch; font-size: 1.06rem; line-height: 1.55; color: var(--ink-2); }
.tab-pulso__senales { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.senal { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1px 10px; padding: 12px 14px; border-radius: var(--r); background: var(--bg-2); }
.senal__f { grid-row: span 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); font-size: 1.05rem; font-weight: 700; color: var(--ink-3); }
.senal--actividad.senal--sube .senal__f { color: var(--data-up); }
.senal--actividad.senal--baja .senal__f { color: var(--data-down); }
.senal__n { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.senal__e { font-size: 1rem; }
.senal__v { font-size: 0.78rem; color: var(--ink-3); }
@media (max-width: 980px) { .tab-pulso__senales { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); } }

/* tarjetas: compactas, un número con su contexto */
.tab-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.kpi { position: relative; display: grid; align-content: start; gap: 8px; min-width: 0; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.kpi__cab { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.kpi__eti { margin: 0; font: 600 0.74rem/1.3 var(--texto); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.kpi__info summary { list-style: none; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 50%; font: 600 0.7rem/1 var(--texto); color: var(--ink-3); cursor: pointer; }
.kpi__info summary::-webkit-details-marker { display: none; }
.kpi__info[open] summary, .kpi__info summary:hover { border-color: var(--ink); color: var(--ink); }
.kpi__info p { position: absolute; left: 12px; right: 12px; top: 40px; z-index: 6; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--ink); color: var(--bg); font-size: 0.8rem; line-height: 1.45; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }
.kpi__valor { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; }
.kpi__valor b { font: 700 clamp(1.45rem, 0.9vw + 1rem, 1.9rem)/1.05 var(--titulo); letter-spacing: -0.03em; white-space: nowrap; }
.kpi__valor span { font-size: 0.8rem; color: var(--ink-3); }
.kpi__vars { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 0.84rem; font-weight: 600; }
.kpi__vars small { font-weight: 400; }
.kpi__seg { margin: 0; font-size: 0.84rem; color: var(--ink-2); }
.kpi__seg b { color: var(--ink); }
.kpi__seg small { color: var(--ink-3); }
.gx-spark { display: block; width: 100%; height: 36px; overflow: visible; }
.gx-spark path { fill: none; stroke: var(--chart-primary); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.kpi__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 0.76rem; color: var(--ink-3); }
.kpi__nota { margin: 0; font-size: 0.76rem; line-height: 1.4; color: var(--ink-3); }
.kpi__ver { justify-self: start; font-size: 0.85rem; font-weight: 600; color: var(--acento-texto); }
.kpi__ver:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) { .tab-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .tab-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tab-kpis .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi { padding: 12px 12px 14px; }
  .kpi__nota { display: none; }
}

/* estado de cada dato */
.est { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: var(--bg-2); font-size: 0.7rem; font-weight: 600; white-space: nowrap; color: var(--ink-2); cursor: help; }
.est::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.est--fresh { color: var(--data-up); }
.est--expected, .est--delayed { color: var(--ojo); }
.est--stale { color: var(--data-down); }
.est--unavailable, .est--cache { color: var(--ink-3); }
.dato-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; font-size: 0.8rem; color: var(--ink-3); }
.dato-meta b { color: var(--ink); }
.dato-meta a, .graf__fuente a, .tab-caja__pie a { text-decoration: underline; text-underline-offset: 2px; }
.dato-csv { font-weight: 600; color: var(--acento-texto) !important; text-decoration: none !important; white-space: nowrap; }
.dato-csv:hover { text-decoration: underline !important; }

/* secciones y gráficos */
.tab-sec { margin-top: 44px; }
.tab-sec__cab { display: grid; gap: 6px; max-width: 80ch; margin-bottom: 16px; }
.tab-sec__cab h2 { margin: 0; font-size: clamp(1.45rem, 1vw + 1rem, 1.9rem); }
.tab-sec__cab p { margin: 0; color: var(--ink-3); }
.tab-sec__cab--fila { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; max-width: none; }
.graf { display: grid; gap: 12px; min-width: 0; }
.graf__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.graf__rangos, .seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--bg-2); }
.graf__rangos button, .seg button { padding: 6px 12px; border: 0; border-radius: 999px; background: none; font: 600 0.82rem/1 var(--texto); color: var(--ink-2); cursor: pointer; }
.graf__rangos button[aria-pressed="true"], .seg button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }
.graf__comparar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--ink-3); }
.chip-comp { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font: 500 0.8rem/1 var(--texto); color: var(--ink-2); cursor: pointer; }
.chip-comp:hover { border-color: var(--ink-3); }
.chip-comp[aria-pressed="true"] { border-color: var(--serie, var(--ink)); color: var(--ink); }
.chip-comp[aria-pressed="true"]::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--serie, var(--ink)); }
.graf__fig { position: relative; margin: 0; }
.graf__svg svg { display: block; width: 100%; height: auto; }
.gx { overflow: visible; font-family: var(--texto); }
.gx__grilla { stroke: var(--chart-grid); stroke-width: 1; }
.gx__cero { stroke: var(--ink-3); }
.gx__base { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 4 4; }
.gx__eje { fill: var(--ink-3); font-size: 11px; }
.gx__s0 { --serie: var(--chart-primary); }
.gx__s1 { --serie: var(--chart-secondary); }
.gx__s2 { --serie: var(--chart-3); }
.gx__s3 { --serie: var(--chart-4); }
.gx__linea { fill: none; stroke: var(--serie); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.gx__area { fill: var(--serie); opacity: 0.08; }
.gx__punto { fill: var(--serie); stroke: var(--bg); stroke-width: 2; }
.gx__barra { fill: var(--serie); }
.gx__barra--parcial { fill-opacity: 0.45; }
.gx__marca { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.gx__foco { fill: var(--serie); stroke: var(--bg); stroke-width: 2; }
.graf__tip { position: absolute; top: 6px; z-index: 4; padding: 8px 10px; border-radius: 10px; background: var(--ink); color: var(--bg); font-size: 0.8rem; line-height: 1.45; white-space: nowrap; pointer-events: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.graf__tip b { font-weight: 700; }
.graf__tip i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--serie); }
.graf__ley { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-size: 0.82rem; color: var(--ink-2); }
.graf__ley-i::before { content: ''; display: inline-block; width: 14px; height: 3px; margin-right: 6px; border-radius: 2px; background: var(--serie); vertical-align: middle; }
.graf__ley-i b { margin-left: 4px; }
.graf__base, .graf__nota { margin: 0; max-width: 80ch; font-size: 0.82rem; color: var(--ink-3); }
.graf__datos summary { width: fit-content; font-size: 0.85rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.graf__tabla { max-height: 320px; overflow: auto; margin-top: 8px; }
.graf__tabla table, .tab-tabla { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.graf__tabla th, .graf__tabla td, .tab-tabla th, .tab-tabla td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tab-tabla thead th, .graf__tabla thead th { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); border-bottom-color: var(--ink); }
.tab-tabla tbody th { font-weight: 600; }
.tab-tabla tbody th small { display: block; font-weight: 400; font-size: 0.78rem; color: var(--ink-3); }
.tab-tabla td span { color: var(--ink-3); font-size: 0.85em; }
.graf__fuente { margin: 0; font-size: 0.8rem; color: var(--ink-3); }
.tabla-desliza { position: relative; overflow-x: auto; }

/* dos columnas: radar | calendario y novedades */
.tab-dos { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; gap: 20px; margin-top: 44px; }
.tab-dos--par { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
.tab-dos__lado { display: grid; gap: 20px; }
.tab-caja { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: calc(var(--r) + 4px); }
.tab-caja h2, .tab-caja h3 { margin: 0; font-size: 1.25rem; }
.tab-caja p { margin: 0; }
.tab-caja__sub, .tab-caja__pie { font-size: 0.84rem; color: var(--ink-3); }
.tab-caja__num b { font: 700 1.9rem/1 var(--titulo); letter-spacing: -0.03em; }
.tab-caja__num span { font-size: 0.9rem; color: var(--ink-3); }
.tab-caja .gx { margin-top: 4px; }
@media (max-width: 900px) { .tab-dos, .tab-dos--par { grid-template-columns: minmax(0, 1fr); } }
/* Resumen: las secciones del wireframe (Argentina, comercio exterior, qué mueve el mercado, macro) */
.tab-dos--mitad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tab-mas { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px; white-space: nowrap; }
.tab-mas:hover { text-decoration-color: var(--acento); }
.arg3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.arg3__panel { display: grid; align-content: start; min-width: 0; padding: 18px 22px 8px; border: 1px solid var(--line); border-radius: calc(var(--r) + 4px); background: var(--bg); }
.arg3__panel h3 { margin: 0 0 10px; font: 600 0.76rem var(--texto); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.arg3__panel ul { margin: 0; padding: 0; list-style: none; }
.arg3__panel li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.arg3__n { display: grid; gap: 1px; min-width: 0; }
.arg3__n small { font-size: 0.76rem; color: var(--ink-3); }
.arg3__panel b { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; text-align: right; }
.arg3__panel b small { display: block; font-size: 0.74rem; font-weight: 400; color: var(--ink-3); }
.mueve { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.mueve li { border-top: 2px solid var(--ink); }
.mueve a { display: grid; gap: 8px; padding-top: 14px; color: var(--ink); }
.mueve__eti { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.mueve b { font: 600 1.06rem/1.32 var(--titulo); }
.mueve a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.mueve__meta { font-size: 0.84rem; color: var(--ink-3); }
@media (max-width: 900px) { .tab-dos--mitad, .arg3, .mueve { grid-template-columns: minmax(0, 1fr); } }
.radar { width: 100%; min-width: 470px; border-collapse: collapse; font-size: 0.9rem; }
.radar th, .radar td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.radar thead th { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); border-bottom-color: var(--ink); }
.radar tbody th { font-weight: 600; }
.radar tbody th small, .radar td small { display: block; font-size: 0.74rem; font-weight: 400; color: var(--ink-3); }
.radar td { font-weight: 600; white-space: nowrap; }
.radar__tend { display: flex; align-items: center; gap: 10px; }
.radar__tend .gx-spark { flex: none; width: 96px; height: 24px; }
.tend { font-size: 0.8rem; font-weight: 600; }
.tend--mejora { color: var(--data-up); }
.tend--empeora { color: var(--data-down); }
.tend--estable { color: var(--ink-3); }
.cal, .nov { list-style: none; margin: 0; padding: 0; display: grid; }
.cal__item { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cal__dia { font: 700 0.8rem/1.2 var(--texto); letter-spacing: 0.04em; color: var(--acento-texto); }
.cal__item b { display: block; font-size: 0.92rem; }
.cal__item div span { display: block; font-size: 0.76rem; color: var(--ink-3); }
.nov li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.nov small { color: var(--ink-3); }

/* Mercado */
.tab-heroe { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); align-items: start; gap: 28px; margin-top: 24px; }
.tab-heroe__dato { display: grid; gap: 10px; padding-top: 6px; }
.tab-heroe__valor { margin: 0; font: 800 clamp(2.3rem, 2vw + 1.5rem, 3.3rem)/1 var(--titulo); letter-spacing: -0.04em; }
.tab-metales { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tab-metales li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); font-size: 0.82rem; }
.tab-metales b { font-size: 1.05rem; }
.tab-explica__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; }
.tab-explica__g > div { padding-top: 12px; border-top: 2px solid var(--ink); }
.tab-explica h2 { margin: 0 0 18px; font-size: clamp(1.45rem, 1vw + 1rem, 1.9rem); }
.tab-explica h3 { margin: 0 0 6px; font-size: 1.1rem; }
.tab-explica p { margin: 0; color: var(--ink-2); }
@media (max-width: 900px) {
  .tab-heroe, .tab-explica__g { grid-template-columns: minmax(0, 1fr); }
  .tab-metales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Argentina: pestañas (sin JavaScript se ven todas las secciones, una abajo de la otra) */
.pestanas { margin-top: 24px; }
.pestanas__lista { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.pestanas__lista::-webkit-scrollbar { display: none; }
.pestana { flex: none; margin-bottom: -1px; padding: 11px 14px; border: 0; border-bottom: 2px solid transparent; background: none; font: 600 0.95rem/1 var(--texto); color: var(--ink-3); cursor: pointer; }
.pestana:hover { color: var(--ink); }
.pestana[aria-selected="true"] { border-bottom-color: var(--acento); color: var(--ink); }
.pestanas__panel { display: grid; gap: 20px; padding-top: 22px; scroll-margin-top: 130px; }
.pestanas__titulo { margin: 10px 0 0; font-size: 1.6rem; }
.pestanas--js .pestanas__titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tab-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tab-mini__i { display: grid; gap: 3px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); font-size: 0.84rem; transition: border-color 0.2s; }
.tab-mini__i:hover { border-color: var(--ink); }
.tab-mini__i > span:first-child { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.tab-mini__i b { font: 700 1.5rem/1.1 var(--titulo); letter-spacing: -0.02em; }
.tab-mini__i small { color: var(--ink-3); }
.tab-panel-dato { display: grid; gap: 12px; min-width: 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: calc(var(--r) + 4px); }
.tab-panel-dato__cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
.tab-panel-dato__cab h3 { margin: 0; font-size: 1.25rem; }
.tab-panel-dato__cab p { margin: 4px 0 0; max-width: 62ch; font-size: 0.9rem; color: var(--ink-3); }
.tab-panel-dato__num { display: grid; justify-items: end; align-content: start; gap: 4px; }
.tab-panel-dato__num b { font: 700 1.8rem/1 var(--titulo); letter-spacing: -0.03em; white-space: nowrap; }
@media (max-width: 900px) { .tab-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .tab-panel-dato, .tab-caja { padding: 16px; }
  .tab-panel-dato__num { justify-items: start; }
}

/* Comercio exterior */
.tab-comex-res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.comex__ctrl { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.comex__cats { margin-bottom: 14px; }
.socios { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.socios li { display: grid; grid-template-columns: minmax(90px, 1.2fr) minmax(40px, 1.3fr) auto 3.4em; align-items: center; gap: 10px; font-size: 0.86rem; }
.socios__b { height: 8px; overflow: hidden; border-radius: 4px; background: var(--bg-2); }
.socios__b i { display: block; height: 100%; border-radius: 4px; background: var(--chart-primary); }
[data-socios="m"] .socios__b i { background: var(--chart-secondary); }
.socios b { white-space: nowrap; }
.socios small { text-align: right; color: var(--ink-3); }
.mapa { display: block; width: 100%; height: auto; margin-block: 2px 8px; }
.mapa__tierra { fill: none; stroke: var(--ink-3); stroke-width: 2.6; stroke-linecap: round; stroke-opacity: 0.6; } /* los continentes en puntos: que se vean también en el tema oscuro y en el celu */
@media (max-width: 640px) { .mapa__tierra { stroke-width: 3.6; stroke-opacity: 0.7; } }
.mapa__b { fill-opacity: 0.5; stroke-width: 1; }
.mapa__b--x { fill: var(--chart-primary); stroke: var(--chart-primary); }
.mapa__b--m { fill: var(--chart-secondary); stroke: var(--chart-secondary); }
.mapa__ar { fill: var(--ink); }
.comex-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.comex-mini__lado { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.comex-mini__lado h3 { margin: 0; font: 600 0.74rem/1.3 var(--texto); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.comex-mini__cuerpo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; gap: 16px; }
.mapa--mini { margin: 0; }
.mapa--mini .mapa__tierra { stroke-width: 3.6; stroke-opacity: 0.7; }
.comex-mini__top { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 0.88rem; }
.comex-mini__top li { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.comex-mini__top li:last-child { padding-bottom: 0; border-bottom: 0; }
.comex-mini__top b { font-variant-numeric: tabular-nums; }
.comex-mini__pie { grid-column: 1 / -1; margin: 0; font-size: 0.84rem; color: var(--ink-3); }
.comex-mini__pie a { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
@media (max-width: 900px) { .comex-mini { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .comex-mini__cuerpo { grid-template-columns: minmax(0, 1fr); } }
.ncm { display: inline-block; min-width: 3.2em; font-weight: 700; color: var(--acento-texto); }
.secreto { font-size: 0.78rem; font-style: italic; color: var(--ink-3); }
.secreto-marca { margin-left: 2px; font-weight: 700; color: var(--acento-texto); cursor: help; }
@media (max-width: 760px) { .tab-comex-res { grid-template-columns: minmax(0, 1fr); } }

/* Fuentes y metodología */
.tab-metodo { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: 36px; margin-top: 24px; }
.tab-metodo__indice { position: sticky; top: 120px; }
.tab-metodo__indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.9rem; }
.tab-metodo__indice a { color: var(--ink-2); }
.tab-metodo__indice a:hover { color: var(--acento-texto); }
.tab-metodo__cuerpo { display: grid; gap: 34px; max-width: 80ch; overflow-wrap: anywhere; }
.tab-metodo__cuerpo > * { min-width: 0; }
.tab-metodo__cuerpo section { scroll-margin-top: 130px; }
.tab-metodo__cuerpo h2 { margin: 0 0 10px; font-size: 1.5rem; }
.tab-metodo__cuerpo p, .tab-metodo__cuerpo li { color: var(--ink-2); line-height: 1.6; }
.tab-metodo__cuerpo ul { display: grid; gap: 8px; padding-left: 20px; }
.tab-ficha { padding: 16px 0; border-top: 1px solid var(--line); scroll-margin-top: 130px; }
.tab-ficha h3 { margin: 0 0 6px; font-size: 1.08rem; }
.tab-ficha p { margin: 0 0 10px; }
.tab-ficha dl { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; font-size: 0.84rem; }
.tab-ficha dl div { display: flex; gap: 6px; }
.tab-ficha dt { color: var(--ink-3); }
.tab-ficha dd { margin: 0; font-weight: 500; }
@media (max-width: 900px) {
  .tab-metodo { grid-template-columns: minmax(0, 1fr); }
  .tab-metodo__indice { position: static; }
}

/* Portada: la invitación al tablero, Doble Click PRO (punto 24 de JIS) */
.pro { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 30px 40px; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--dc-borde); border-radius: 22px; background: var(--dc-fondo); color: #ffffff; }
.pro::after { content: ''; position: absolute; left: -110px; bottom: -120px; width: 300px; height: 300px; border-radius: 50%; border: 2px solid rgba(255, 122, 69, 0.45); box-shadow: 0 0 0 34px rgba(255, 122, 69, 0.06), 0 0 0 68px rgba(255, 122, 69, 0.035); pointer-events: none; }
.pro__txt { position: relative; z-index: 1; display: grid; justify-items: start; gap: 14px; }
.pro__marca { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2em; margin: 0; font: 800 var(--titulo-grande)/0.95 var(--titulo); letter-spacing: -0.05em; color: #ffffff; } /* del tamaño de los demás títulos */
.pro__marca em { font-style: normal; color: #ff7a45; }
.pro__marca b { margin-left: 0.15em; padding: 0.12em 0.32em 0.16em; border-radius: 0.28em; background: #ff7a45; color: #111111; font-size: 0.42em; letter-spacing: 0; vertical-align: middle; }
.pro__titulo { margin: 0; font: 700 clamp(1.2rem, 0.6vw + 1rem, 1.5rem)/1.2 var(--titulo); }
.pro__bajada { margin: 0; max-width: 46ch; color: #d9d5cf; line-height: 1.55; }
.pro .btn { background: #ff7a45; color: #111111; font-weight: 600; }
.pro__datos { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pro .ind-mini { gap: 3px; padding: 14px 16px 16px; border: 1px solid #2c2c2c; border-radius: 16px; background: #161616; }
.pro .ind-mini:nth-child(n) { padding: 14px 16px 16px; border-left: 1px solid #2c2c2c; }
.pro .ind-mini b { font-size: clamp(1.3rem, 0.8vw + 1rem, 1.7rem); color: #ffffff; }
.pro .ind-mini:hover b { color: #ff7a45; }
.pro .ind-mini__n, .pro .ind-mini__u, .pro .ind-mini__v { color: #a9a9a4; }
.pro .spark { max-width: none; height: 30px; margin-top: 4px; }
.pro .spark polyline { stroke: #ff7a45; }
@media (max-width: 900px) { .pro { grid-template-columns: minmax(0, 1fr); } }

/* La barra de secciones pegada, en la compu (punto 23 de JIS): el menú principal a la izquierda, las
   secciones (o las herramientas, o las páginas de Indicadores) en gris a la derecha y la lupa al final.
   Arriba de todo no cambia: el menú está en el encabezado. */
.secciones .busca-fila--compu { display: none; }
.chip-nav__mas { display: none; }
@media (min-width: 901px) {
  .secciones .wrap { display: flex; align-items: center; }
  .secciones__fila:not(.secciones__fila--menu) { flex: 1; min-width: 0; }
  .secciones--pegada .secciones__fila--menu { display: flex; flex: none; align-items: center; margin-right: 18px; padding-right: 18px; border-right: 1px solid var(--line); animation: barra-menu 0.25s var(--ease); }
  .secciones--pegada .secciones__fila--menu .secciones__in { gap: 20px; overflow: visible; }
  .secciones--pegada .secciones__fila:not(.secciones__fila--menu) .secciones__in { gap: 18px; }
  .secciones--pegada .secciones__fila--menu .chip-nav--herr { display: inline-flex; font-weight: 600; color: var(--ink); }
  .secciones--pegada .secciones__fila--menu .chip-nav--herr[aria-current] { border-bottom-color: var(--acento); }
  .secciones--pegada .chip-nav__mas { display: inline; }
  .secciones__fila--menu .busca-fila { display: none; }
  .secciones--pegada .secciones__fila:not(.secciones__fila--menu) .secciones__logo { display: none; }
  .secciones--pegada .busca-fila--compu { display: grid; flex: none; place-items: center; width: 38px; height: 38px; margin-left: 8px; border-radius: 50%; color: var(--ink-2); }
  .secciones--pegada .busca-fila--compu:hover { background: var(--bg-2); color: var(--ink); }
  .busca-fila--compu .lupa { width: 19px; height: 19px; }
}
@keyframes barra-menu { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .secciones--pegada .secciones__fila--menu { animation: none; } }

/* ── Indicadores ──────────────────────────────────────────────────────── */

.indicadores { padding-top: 40px; }
.ind__indice { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 32px 0 8px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); font-size: 0.92rem; }
.ind__indice a { color: var(--ink-3); }
.ind__indice a:hover { color: var(--ink); }
.ind { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 64px); padding-block: 40px; border-bottom: 1px solid var(--line); scroll-margin-top: 60px; }
.ind__cab { display: grid; gap: 10px; align-content: start; }
.ind__cab h2 { margin: 0; font-size: 0.8rem; font-family: var(--texto); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ind__valor { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ind__valor b { font: 700 clamp(2.4rem, 3vw + 1rem, 3.6rem)/1 var(--titulo); letter-spacing: -0.03em; }
.ind__valor span { color: var(--ink-3); }
.ind__cuando { margin: 0; font-size: 0.88rem; color: var(--ink-3); }
.ind__vars, .ind__dolares { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 0.92rem; color: var(--ink-3); }
.ind__vars b, .ind__dolares b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.ind__significa { margin: 8px 0 0; color: var(--ink-2); max-width: 52ch; }
.ind__fuente { margin: 0; font-size: 0.8rem; color: var(--ink-3); }
.ind__fuente a { text-decoration: underline; text-underline-offset: 2px; }
.ind__graf { min-width: 0; }
.gr { display: block; width: 100%; height: auto; overflow: visible; }
.gr__grilla { stroke: var(--line); stroke-width: 1; }
.gr__eje { fill: var(--ink-3); font: 500 12px var(--texto); }
.gr__linea { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.gr__area { fill: color-mix(in srgb, var(--acento) 9%, transparent); }
.gr__punto { fill: var(--acento); stroke: var(--bg); stroke-width: 2; }
.gr__barra { fill: color-mix(in srgb, var(--ink) 22%, transparent); }
.gr__barra--ultima { fill: var(--acento); }
.ind__datos { margin-top: 14px; font-size: 0.88rem; }
.ind__datos summary { cursor: pointer; color: var(--ink-3); width: fit-content; }
.ind__datos summary:hover { color: var(--ink); }
.ind__tabla { max-height: 280px; overflow: auto; margin-top: 10px; }
.ind__tabla table { width: 100%; border-collapse: collapse; }
.ind__tabla th, .ind__tabla td { text-align: left; padding: 7px 12px 7px 0; border-bottom: 1px solid var(--line); }
.ind__tabla th { position: sticky; top: 0; background: var(--bg); font-weight: 500; color: var(--ink-3); }
.cta-calc__botones { display: flex; flex-wrap: wrap; gap: 10px; }

.ind-fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.ind-mini { display: grid; gap: 4px; align-content: start; padding: 24px 24px 26px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.ind-mini:first-child { padding-left: 0; border-left: 0; }
.ind-mini__n { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.ind-mini b { font: 700 clamp(1.6rem, 1.2vw + 1rem, 2.1rem)/1.1 var(--titulo); letter-spacing: -0.03em; }
.ind-mini__u, .ind-mini__v { font-size: 0.84rem; color: var(--ink-3); }
.ind-mini:hover b { color: var(--acento); }
.spark { width: 100%; max-width: 160px; height: 36px; margin-top: 8px; }
.spark polyline { fill: none; stroke: var(--acento); stroke-width: 1.8; stroke-linejoin: round; }

/* ── Biblioteca técnica ───────────────────────────────────────────────── */

.biblio { padding-top: 40px; }
.curso { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.curso li { border-bottom: 1px solid var(--line); }
.curso a { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 22px 0; }
.curso__n { font: 600 1rem/1 var(--titulo); color: var(--acento-texto); }
.curso__t { display: grid; gap: 4px; }
.curso__t b { font: 700 clamp(1.2rem, 0.8vw + 1rem, 1.5rem)/1.2 var(--titulo); letter-spacing: -0.02em; }
.curso__t span { color: var(--ink-3); font-size: 0.95rem; max-width: 72ch; }
.curso__min { font-size: 0.84rem; color: var(--ink-3); white-space: nowrap; }
.curso a:hover b { color: var(--acento); }

.leccion { padding-top: 48px; }
.leccion__cab { max-width: 820px; display: grid; gap: 16px; justify-items: start; }
.leccion__cab h1 { margin: 0; font-size: var(--titulo-grande); line-height: 1.04; }
.leccion__cab .meta { margin: 0; }
.leccion__cuerpo { display: grid; grid-template-columns: minmax(0, 700px) minmax(0, 300px); justify-content: space-between; gap: clamp(32px, 5vw, 80px); margin-top: 40px; }
.leccion__texto section + section { margin-top: 40px; }
.leccion__texto h2 { margin: 0 0 12px; font-size: clamp(1.4rem, 1vw + 1rem, 1.8rem); line-height: 1.15; }
.leccion__texto p { margin: 0 0 14px; font-size: 1.06rem; line-height: 1.7; color: var(--ink-2); }
.leccion__texto p b, .leccion__texto li b { color: var(--ink); font-weight: 600; }
.pasos, .lista { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 10px; font-size: 1.04rem; line-height: 1.65; color: var(--ink-2); }
.pasos li::marker { font-weight: 600; color: var(--acento-texto); }
.lista li::marker { color: var(--acento-texto); }
.tabla-lec { overflow-x: auto; margin: 4px 0 16px; }
.tabla-lec table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.95rem; }
.tabla-lec th, .tabla-lec td { text-align: left; vertical-align: top; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.tabla-lec thead th { border-bottom: 1px solid var(--ink); font-weight: 500; color: var(--ink-3); }
.nota-lec { font-size: 0.84rem !important; color: var(--ink-3) !important; }
.formula { margin: 4px 0 16px; padding: 16px 20px; border-left: 2px solid var(--acento); background: var(--bg-2); border-radius: 0 var(--r) var(--r) 0; }
.formula p { margin: 0 !important; color: var(--ink) !important; }
.formula p + p { margin-top: 6px !important; }
.faq--leccion { padding-inline: 0; }
.leccion__sig { margin-top: 48px; border-top: 1px solid var(--ink); }
.leccion__sig a { display: grid; gap: 6px; padding-top: 20px; }
.leccion__sig span { font-size: 0.84rem; color: var(--ink-3); }
.leccion__sig b { font: 700 clamp(1.3rem, 1vw + 1rem, 1.7rem)/1.2 var(--titulo); letter-spacing: -0.02em; }
.leccion__sig a:hover b { color: var(--acento); }

@media (max-width: 980px) {
  .ind, .leccion__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .ind-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind-mini:nth-child(odd) { padding-left: 0; border-left: 0; }
  .ind-mini:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .curso a { grid-template-columns: 40px minmax(0, 1fr); }
  .curso__min { grid-column: 2; }
  .ind-mini:nth-child(n) { padding-inline: 0 12px; }
  .ind-mini:nth-child(even) { padding-left: 16px; }
  .ind-mini b { font-size: 1.45rem; }
}

/* ── Consultas por WhatsApp o mail, descargas y privacidad ───────────── */

.consulta__mail { padding: 18px 0 4px; border-top: 1px solid var(--line); }
.consulta__mail form { display: grid; gap: 12px; justify-items: start; }
.consulta__campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; }
.consulta__campos label { display: grid; gap: 6px; align-content: end; font-size: 0.84rem; color: var(--ink-3); }
.consulta__campos label span { font-size: 0.78rem; }
.consulta__campos input { width: 100%; font: 400 0.95rem var(--texto); padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); }
.consulta__campos input:focus { border-color: var(--ink); outline: none; }
.consulta__plano { display: grid; gap: 6px; width: 100%; padding: 14px 16px; border: 1px dashed var(--line); border-radius: var(--r); font-size: 0.84rem; color: var(--ink-3); transition: border-color 0.2s; }
.consulta__plano:focus-within { border-color: var(--acento); }
.consulta__plano-t { color: var(--ink-2); font-weight: 500; }
.consulta__plano-t span { font-weight: 400; color: var(--ink-3); }
.consulta__plano input { max-width: 100%; font: 400 0.88rem var(--texto); color: var(--ink); }
.consulta__plano input::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: 500 0.84rem var(--texto); cursor: pointer; }
.consulta__plano input::file-selector-button:hover { border-color: var(--ink); }
.consulta__plano-ayuda { font-size: 0.78rem; }
/* Casilla de aceptación de las condiciones de carga de archivos (Mi proyecto y Subí tu plano) */
.acepta-archivos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font-size: 0.84rem; line-height: 1.5; color: var(--ink-2); text-align: left; cursor: pointer; }
.acepta-archivos input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--acento); cursor: pointer; }
.acepta-archivos a { color: var(--acento-texto); text-decoration: underline; text-underline-offset: 2px; }
.consulta__plano .acepta-archivos { margin-top: 6px; }
.consulta__datos { margin: 0; font-size: 0.84rem; color: var(--ink-3); }
.consulta__datos b { color: var(--ink); font-weight: 600; user-select: all; }
.descarga { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 24px; font-size: 0.86rem; color: var(--ink-3); }
.aviso-datos { grid-column: 1 / -1; margin: 4px 0 0 !important; font-size: 0.78rem; color: var(--ink-3); }
.aviso-datos a { text-decoration: underline; text-underline-offset: 2px; }
.privacidad .leccion__texto { max-width: 720px; margin-top: 32px; }
@media (max-width: 640px) { .consulta__campos { grid-template-columns: minmax(0, 1fr); } }

/* WhatsApp en la compu: se elige una vez cómo abrirlo (Web, app o celular con QR) */
.wa-elegir { width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--line); border-radius: calc(var(--r) + 4px); background: var(--bg); color: var(--ink); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28); }
.wa-elegir::backdrop { background: rgba(8, 8, 9, 0.55); }
.wa-elegir[open] { animation: subir 0.25s var(--ease); }
.wa-elegir__caja { position: relative; display: grid; gap: 18px; padding: 26px 24px 22px; }
.wa-elegir h2 { margin: 0; padding-right: 40px; font-size: 1.35rem; line-height: 1.2; }
.wa-elegir__bajada { margin: -10px 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }
.wa-elegir__opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wa-elegir__opciones button { display: grid; justify-items: start; gap: 2px; padding: 14px 16px 15px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.wa-elegir__opciones button:hover { border-color: var(--acento); }
.wa-elegir__opciones svg { width: 24px; height: 24px; margin-bottom: 8px; color: var(--acento-texto); }
.wa-elegir__opciones b { font-size: 1rem; font-weight: 600; }
.wa-elegir__opciones span { font-size: 0.84rem; color: var(--ink-3); }
.wa-elegir__cel { display: flex; align-items: center; gap: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.wa-elegir__qr { flex: none; display: grid; place-items: center; width: var(--lado, 168px); max-width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #fff; }
.wa-elegir__qr svg { display: block; width: 100%; height: 100%; }
.wa-elegir__qr[data-estado="cargando"] { background: var(--bg-2); }
.wa-elegir__cel p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); }
.wa-elegir__cel p b { display: block; margin-bottom: 2px; font-size: 1rem; font-weight: 600; color: var(--ink); }
.wa-elegir__pie { margin: 0; font-size: 0.84rem; color: var(--ink-3); }
.wa-elegir__pie b { font-weight: 600; color: var(--ink); user-select: all; }
.wa-elegir__x { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-3); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.wa-elegir__x:hover { background: var(--bg-2); color: var(--ink); }
.wa-aviso { position: fixed; left: 0; right: 0; bottom: 24px; z-index: 60; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; width: fit-content; max-width: calc(100vw - 32px); margin-inline: auto; padding: 12px 20px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 0.9rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); animation: subir 0.25s var(--ease); }
.wa-aviso button { padding: 0; border: 0; background: none; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 520px) { .wa-elegir__opciones { grid-template-columns: minmax(0, 1fr); } .wa-elegir__cel { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .wa-elegir[open], .wa-aviso { animation: none; } }

/* ── ¿Anodizado, pintura o símil madera? ──────────────────────────────── */

/* comparador: las cuatro terminaciones lado a lado */
.tc { margin-top: 30px; }
.tc__busca { display: grid; gap: 12px; }
.tc__pregunta { margin: 0; font-size: 1.05rem; font-weight: 600; }
.tc__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tc-chip { padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: inherit; font-size: 0.95rem; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.tc-chip:hover { border-color: var(--ink-3); }
.tc-chip[aria-pressed="true"] { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, var(--bg)); }
.tc__veredicto { display: flex; align-items: center; gap: 12px; max-width: 760px; margin: 4px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--bg-2); font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.tc__veredicto b { color: var(--ink); font-weight: 600; }
.tc-tabla { width: 100%; margin-top: 28px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.tc-tabla th, .tc-tabla td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tc-tabla thead th, .tc-esquina { position: sticky; top: 50px; z-index: 2; background: var(--bg); }
.tc-esquina { width: 22%; }
.tc-tabla tbody th { font-size: 0.9rem; font-weight: 500; color: var(--ink-3); }
.tc-tabla td { font-size: 0.92rem; color: var(--ink-2); transition: background-color 0.25s; }
.tc-col { display: grid; gap: 10px; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.tc-col__muestra { display: block; height: 64px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); transition: transform 0.3s var(--ease), box-shadow 0.25s; }
.tc-col:hover .tc-col__muestra { transform: translateY(-2px); }
.tc-col__nombre { font-family: var(--titulo); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
.tc-col[aria-pressed="true"] .tc-col__muestra { box-shadow: 0 0 0 2px var(--acento); }
.tc-puntos { display: flex; gap: 4px; margin-bottom: 6px; }
.tc-puntos i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.tc-puntos i.si { background: var(--acento); }
.tc-precio { display: block; margin-bottom: 4px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink); }
.tc-precio span { color: var(--line); }
.tc-txt { display: block; line-height: 1.35; }
/* la terminación elegida queda marcada en toda su columna */
.tc[data-elegida="natural"] [data-col="natural"], .tc[data-elegida="anodizado"] [data-col="anodizado"], .tc[data-elegida="pintura"] [data-col="pintura"], .tc[data-elegida="madera"] [data-col="madera"] { background: color-mix(in srgb, var(--acento) 9%, var(--bg)); }
.tc__nota { max-width: 90ch; margin: 18px 0 0; font-size: 0.86rem; color: var(--ink-3); }
@media (max-width: 760px) {
  .tc-tabla, .tc-tabla thead, .tc-tabla tbody { display: block; }
  .tc-tabla tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tc-tabla thead tr { position: sticky; top: 50px; z-index: 2; background: var(--bg); }
  .tc-tabla thead th { position: static; }
  .tc-esquina { display: none; }
  .tc-tabla th, .tc-tabla td { padding: 8px 5px 12px; }
  .tc-tabla tbody th { grid-column: 1 / -1; padding: 14px 4px 2px; border-bottom: 0; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
  .tc-col { gap: 6px; }
  .tc-col__muestra { height: 44px; border-radius: 10px; }
  .tc-col__nombre { font-size: 0.86rem; line-height: 1.15; }
  .tc-tabla td { font-size: 0.8rem; }
  .tc-puntos { gap: 3px; }
  .tc-puntos i { width: 7px; height: 7px; }
}
/* muestras de cada terminación (orientativas: no son colores de carta) */
.term-muestra { flex: none; width: 56px; height: 56px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.term-muestra--chica { width: 28px; height: 28px; border-radius: 8px; }
.term-muestra--metal { background: linear-gradient(120deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.16) 70%, rgba(255, 255, 255, 0) 86%), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 3px), linear-gradient(90deg, #d5d8dc 0 33.4%, #9c7448 33.4% 66.7%, #26272a 66.7%); }
.term-muestra--pintura { background: conic-gradient(from 45deg, #ef5a24 0 25%, #f2f2f0 0 50%, #2b2b2d 0 75%, #8f969c 0); }
.tc-col__muestra.term-muestra--pintura { background: linear-gradient(90deg, #f2f2f0 0 25%, #8f969c 25% 50%, #2b2b2d 50% 75%, #ef5a24 75%); }
.term-muestra--madera { background: repeating-linear-gradient(97deg, rgba(60, 32, 14, 0.2) 0 2px, transparent 2px 9px), repeating-linear-gradient(101deg, rgba(255, 220, 170, 0.08) 0 1px, transparent 1px 5px), linear-gradient(90deg, #8a5a33, #a06d42 35%, #87562f 60%, #a5744a); }
.term-muestra--natural { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 3px), linear-gradient(135deg, #cfd1d4, #aeb1b5); }

/* ── Carta de bienvenida: Quiénes somos y la tarjeta fija de la portada ── */

.carta-fija { display: grid; justify-items: start; gap: 16px; padding: clamp(24px, 4.4vw, 56px); border-radius: 22px; background: var(--carta-fondo); }
.carta-fija__marca { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acento-texto); }
.carta-fija h2 { margin: 0; max-width: 26ch; font-size: clamp(1.7rem, 1.8vw + 1rem, 2.5rem); line-height: 1.12; text-wrap: balance; } /* la carta, apenas más chica que los títulos */
.carta-arriba { padding-top: clamp(24px, 4vw, 48px); }
.carta-fija__cita { position: relative; margin: 2px 0 0; padding-left: 40px; max-width: 64ch; }
.carta-fija__cita::before { content: "“"; position: absolute; left: 0; top: -4px; font: 800 2.6rem/1 var(--titulo); color: var(--acento-texto); }
.carta-fija__cita p { margin: 0; font-size: clamp(1.02rem, 0.35vw + 0.95rem, 1.18rem); line-height: 1.6; color: var(--ink); }
.carta-fija__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; justify-self: stretch; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--carta-linea); }
.carta-fija__firma { display: grid; gap: 2px; }
.carta-fija__firma b { font-size: 1rem; }
.carta-fija__firma span { font-size: 0.88rem; color: var(--ink-3); }
.carta-fija__ir { flex: none; }
.carta-fija__ir span { display: inline-block; transition: transform 0.25s var(--ease); }
a.carta-fija { color: var(--ink); text-decoration: none; transition: box-shadow 0.25s; }
a.carta-fija:hover { box-shadow: inset 0 0 0 1.5px var(--acento-texto); }
a.carta-fija:hover .carta-fija__ir span { transform: translateX(4px); }
.carta .leccion__texto { max-width: 680px; margin-top: 36px; }
.carta .leccion__texto .carta__saludo { font-weight: 600; color: var(--ink); }
.carta .leccion__texto .carta__lema { margin: 30px 0; padding-left: 18px; border-left: 3px solid var(--acento); font: 700 clamp(1.2rem, 0.8vw + 1rem, 1.45rem)/1.3 var(--titulo); letter-spacing: -0.01em; color: var(--ink); }
.carta .leccion__texto .carta__firma { display: grid; gap: 2px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.95rem; }
.carta__firma b { font-size: 1.08rem; }
.carta__firma span { color: var(--ink-3); font-style: italic; }
.carta .leccion__texto p a { text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color 0.15s; }
.carta .leccion__texto p a:hover { color: var(--acento-texto); }
.carta__firma a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; transition: color 0.15s; }
.carta__firma a:hover { color: var(--acento-texto); text-decoration-color: currentColor; }
.carta__firma b a { color: inherit; }
.carta__ideas { max-width: 680px; margin-top: 36px; padding: 18px 22px; border-radius: var(--r); background: var(--bg-2); }
.carta__ideas p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--ink-2); }
.carta__ideas a { color: var(--acento-texto); text-decoration: underline; text-underline-offset: 3px; }
.carta__ideas b { font-weight: 600; color: var(--ink); user-select: all; }
@media (max-width: 760px) { .carta-fija { padding: 24px 20px; } .carta-fija__cita { padding-left: 32px; } }

/* ── Empresas del grupo y firma ───────────────────────────────────────── */

.marcas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.marca { display: grid; gap: 14px; align-content: start; padding: 28px 24px 30px 0; border-bottom: 1px solid var(--line); }
.marcas .marca + .marca { padding-left: 24px; border-left: 1px solid var(--line); }
.marca__logo { display: block; height: 36px; }
.marca__logo img { height: 100%; width: auto; }
.marca__oscuro { display: none; }
.marca__que { font-size: 0.92rem; font-weight: 500; color: var(--acento-texto); }
.marca:hover .marca__que { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marca__claro { display: none; } :root:not([data-theme="light"]) .marca__oscuro { display: block; } }
:root[data-theme="dark"] .marca__claro { display: none; }
:root[data-theme="dark"] .marca__oscuro { display: block; }
@media (max-width: 640px) {
  .marcas { grid-template-columns: minmax(0, 1fr); }
  .marcas .marca + .marca { padding-left: 0; border-left: 0; }
}

/* ── Portada: las herramientas son lo principal ───────────────────────── */

.portada-herr { padding-top: clamp(36px, 5vw, 64px); }
/* En la portada, el título de cada sección va del mismo tamaño que el de Herramientas */
.portada .bloque__cab h2 { font-size: var(--titulo-grande); line-height: 1.04; }
.hero { padding-top: 0; }

.ind--tabla { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); }
.ind__tabla--abierta { max-height: none; margin-top: 0; overflow-x: auto; }
.ind__tabla--abierta table { min-width: 460px; font-size: 0.92rem; }
.ind__tabla--abierta tbody th { font-weight: 600; color: var(--ink); }
.ind__tabla--abierta tbody th small { display: block; font-weight: 400; color: var(--ink-3); font-size: 0.8rem; margin-top: 2px; }
.ind__tabla--abierta td span { color: var(--ink-3); font-size: 0.84rem; }

/* ── Pie: marcas del grupo y firma ────────────────────────────────────── */

.pie ul.pie__marcas { gap: 20px; }
.pie p.pie__legal { max-width: none; margin-top: 18px; font-size: 0.72rem; line-height: 1.55; color: var(--ink-3); }
.pie__marca { display: grid; gap: 7px; justify-items: start; font-size: 0.82rem; line-height: 1.35; color: var(--ink-3); }
.pie__marca .marca__logo { height: 26px; transition: opacity 0.2s; }
.pie__marca--metrar .marca__logo { height: 21px; }
.pie__marca:hover .marca__logo { opacity: 0.75; }
.pie__marca:hover span:last-child { color: var(--ink); }
.pie__firma { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: 40px; padding-top: 20px; font-size: 0.8rem; color: var(--ink-3); background: linear-gradient(var(--line), var(--line)) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
.pie__hikai { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); transition: color 0.2s; }
.pie__hikai img { height: 16px; width: auto; }
.pie__hikai:hover { color: var(--ink); }
@media (max-width: 980px) { .pie__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pie__in { grid-template-columns: minmax(0, 1fr); } }

/* ── Botón de tema: luna en claro, sol en oscuro ─────────────────────── */

.tema { margin-left: auto; position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; flex: none; transition: background-color 0.2s, color 0.2s; }
.tema:hover { background: var(--bg-2); color: var(--ink); }
.tema__ico { grid-area: 1 / 1; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.45s var(--ease), opacity 0.25s; }
.tema__ico--sol, .tema[data-efectivo="oscuro"] .tema__ico--luna { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.tema[data-efectivo="oscuro"] .tema__ico--sol { opacity: 1; transform: none; }

/* ── Mi proyecto ──────────────────────────────────────────────────────── */

.mp-app { margin-top: 36px; }
.mp-vacio { max-width: 640px; display: grid; gap: 16px; padding: 32px 0; border-top: 1px solid var(--ink); }
.mp-vacio h2 { margin: 0; font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem); }
.mp-vacio p { margin: 0; color: var(--ink-2); }
.mp-nuevo { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-nuevo input, .mp-barra select, .mp-campo input, .mp-campo select, .mp-campo textarea { font: 400 0.95rem var(--texto); padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); min-width: 0; }
.mp-nuevo input { flex: 1 1 220px; }
.mp-barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--ink); }
.mp-barra select { font-weight: 600; max-width: 100%; }
.mp-nuevo--chico input { flex-basis: 180px; }
.mp { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 56px); padding-top: 28px; align-items: start; }
.mp__datos { display: grid; gap: 14px; }
.mp-campo { display: grid; gap: 6px; font-size: 0.84rem; color: var(--ink-3); }
.mp-campo textarea { resize: vertical; line-height: 1.5; }
.mp-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mp-meta { margin: 0; font-size: 0.86rem; color: var(--ink-3); }
.mp-plano { gap: 8px; }
.mp-plano__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.mp-plano__elegir { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.mp-plano__elegir svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mp-plano__elegir:focus-within, .mp-plano__accion:focus-within { outline: 2px solid var(--acento); outline-offset: 2px; }
.mp-plano__archivo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 0.92rem; }
.mp-plano__archivo b { font-weight: 600; overflow-wrap: anywhere; }
.mp-plano__archivo > span { color: var(--ink-3); font-size: 0.84rem; }
.mp-plano__accion { padding: 0; border: 0; background: none; color: var(--acento-texto); font: 500 0.84rem var(--texto); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.mp-plano__archivo label.mp-plano__accion { margin-left: auto; }
.mp-plano .acepta-archivos { margin-top: 4px; }
.mp-plano__nota { margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--ink-3); }
.mp-plano .error:empty { display: none; }
.mp-acciones, .mp-pie { display: flex; flex-wrap: wrap; gap: 10px; }
.mp__items h2 { margin: 0 0 12px; font-size: 0.8rem; font-family: var(--texto); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.mp-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mp-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.mp-lista h3 { margin: 6px 0; font-size: 1.08rem; }
.mp-lista pre { margin: 0; white-space: pre-wrap; font: 400 0.9rem/1.55 var(--texto); color: var(--ink-2); }
.mp-quitar { align-self: start; font: 500 0.84rem var(--texto); color: var(--ink-3); background: none; border: 0; cursor: pointer; padding: 4px; }
.mp-quitar:hover { color: var(--acento-texto); }
.mp-sin { color: var(--ink-3); }
.mp-sin a { text-decoration: underline; text-underline-offset: 2px; }
.mp-pie { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
/* Cuenta opcional de Mi proyecto */
.mp-nube { margin-top: 28px; padding: 18px 20px; border: 1px dashed var(--line); border-radius: var(--r); display: grid; gap: 10px; max-width: 760px; }
.mp-nube p { margin: 0; }
.mp-nube--si { border-style: solid; }
.mp-nube__estado { color: var(--acento-texto); font-weight: 600; }
.mp-nube__estado:empty { display: none; }
.mp-nube__legal { font-size: 0.8rem; color: var(--ink-3); }
.mp-nube__acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.mp-borrar { margin-left: auto; }
.mp-importar { cursor: pointer; }
.mp-confirmar, .mp-aviso { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--acento-texto); }
.guardado { flex-basis: 100%; margin: 4px 0 0; font-size: 0.86rem; color: var(--ink-2); }
.guardado a { color: var(--acento-texto); font-weight: 500; }
.pedido__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 900px) { .mp { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .mp-tres { grid-template-columns: minmax(0, 1fr); } .mp-borrar { margin-left: 0; } }

/* ── Del sector: datos cargados en el panel y documentos ──────────────── */

.sector-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0; border-top: 1px solid var(--line); margin-bottom: 24px; }
.sector-dato { display: grid; gap: 4px; align-content: start; padding: 18px 18px 20px 0; border-bottom: 1px solid var(--line); }
.sector-dato b { font: 700 clamp(1.5rem, 1vw + 1rem, 1.9rem)/1.1 var(--titulo); letter-spacing: -0.03em; }
.sector-dato__n { font-weight: 600; font-size: 0.95rem; }
.sector-dato a { text-decoration: underline; text-underline-offset: 2px; }
.docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 28px; border-top: 1px solid var(--line); }
.docs--mini { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.doc { display: grid; gap: 8px; align-content: start; padding: 20px 0; border-bottom: 1px solid var(--line); }
.doc__meta { margin: 0; font-size: 0.84rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.doc h3 { margin: 0; font-size: 1.1rem; line-height: 1.25; }
.doc--grande h3 { font-size: 1.25rem; }
.doc p { margin: 0; color: var(--ink-2); font-size: 0.94rem; }
.doc .doc__tags { font-size: 0.84rem; font-weight: 600; color: var(--acento-texto); word-spacing: 0.25em; }
.doc__botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.doc__botones .btn { padding: 9px 16px; font-size: 0.88rem; }
.docs-pagina { margin-top: 32px; display: grid; gap: 20px; }
.docs-pagina .filtros a { font-size: 0.9rem; color: var(--ink-3); padding: 4px 0; border-bottom: 1.5px solid transparent; }
.docs-pagina .filtros a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
/* Biblioteca: el ABC de cada proceso (índice, cruces y el recuadro de Metrar en las guías de diseño) */
.abc-indice { margin-top: 56px; }
.abc-indice > h2 { margin: 0 0 8px; font-size: var(--titulo-grande); line-height: 1.04; }
.abc-indice > p { margin: 0 0 22px; max-width: 64ch; color: var(--ink-2); }
.abc-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.abc-lista a { display: grid; align-content: start; gap: 6px; height: 100%; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); transition: border-color 0.2s; }
.abc-lista a:hover { border-color: var(--acento-texto); }
.abc-lista b { font: 700 1.15rem/1.2 var(--titulo); letter-spacing: -0.01em; }
.abc-lista span { font-size: 0.9rem; line-height: 1.45; color: var(--ink-2); }
.abc-lista small { margin-top: 4px; font-size: 0.8rem; color: var(--ink-3); }
.abc-cruces { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--ink); }
.abc-cruces h2 { margin: 0 0 12px; font-size: 0.8rem; font-family: var(--texto); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.abc-cruces ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.abc-cruces a { display: grid; gap: 4px; height: 100%; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); transition: border-color 0.2s; }
.abc-cruces a:hover { border-color: var(--acento-texto); }
.abc-cruces b { font: 700 1.05rem/1.25 var(--titulo); }
.abc-cruces span { font-size: 0.88rem; line-height: 1.45; color: var(--ink-3); }
.abc-venta { position: relative; overflow: hidden; display: grid; justify-items: start; gap: 10px; margin-top: 36px; padding: clamp(22px, 3.4vw, 34px); border: 1px solid var(--dc-borde); border-radius: 22px; background: var(--dc-fondo); color: #d9d5cf; }
.abc-venta::after { content: ''; position: absolute; right: -120px; bottom: -130px; width: 280px; height: 280px; border-radius: 50%; border: 2px solid rgba(255, 122, 69, 0.4); box-shadow: 0 0 0 30px rgba(255, 122, 69, 0.05), 0 0 0 60px rgba(255, 122, 69, 0.03); pointer-events: none; }
.abc-venta > * { position: relative; z-index: 1; }
.abc-venta__eti { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #ff7a45; }
.leccion .abc-venta h2 { margin: 0; max-width: 26ch; font: 700 clamp(1.35rem, 1vw + 1rem, 1.8rem)/1.15 var(--titulo); color: #ffffff; }
.leccion .abc-venta p { margin: 0; max-width: 58ch; color: #d9d5cf; }
.abc-venta__botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.abc-venta .btn { background: #ff7a45; color: #111111; font-weight: 600; }
.abc-venta .btn--linea { background: transparent; color: #ffffff; box-shadow: inset 0 0 0 1px #4a4a4a; font-weight: 500; }
.abc-venta .btn--linea:hover { box-shadow: inset 0 0 0 1px #ffffff; }
.abc-venta__sitio { font-size: 0.88rem; color: #d9d5cf; text-decoration: underline; text-underline-offset: 3px; }
.abc-venta__sitio:hover { color: #ffffff; }
.biblio-docs { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 28px; margin-top: 40px; padding: 26px 0; border-block: 1px solid var(--line); }
.biblio-docs h2 { margin: 0 0 6px; font-size: clamp(1.3rem, 1vw + 1rem, 1.7rem); }
.biblio-docs p { margin: 0; color: var(--ink-3); max-width: 60ch; }

/* ── Aluminio con RPT vs PVC: qué pasa con el calor ───────────────────── */

#t-rpt-vs-pvc { --rp-pvc: var(--s-empresas); --rp-pa: var(--s-comercio); --rp-al: var(--acento); --rp-ref: var(--ink-3); }
#t-rpt-vs-pvc [data-tipo] { --c: var(--rp-ref); }
#t-rpt-vs-pvc [data-tipo="pvc"] { --c: var(--rp-pvc); }
#t-rpt-vs-pvc [data-tipo="pa"] { --c: var(--rp-pa); }
#t-rpt-vs-pvc [data-tipo="al"] { --c: var(--rp-al); }
.rp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); grid-template-areas: "barra barra" "escena lado" "escala escala"; margin-top: 32px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; scroll-margin-top: 64px; }
.rp__barra { grid-area: barra; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.rp__grados { margin: 0; display: flex; align-items: baseline; gap: 2px; }
.rp__grados input { width: 4.3ch; padding: 0 2px; border: 0; border-radius: 8px; background: transparent; font: 700 clamp(2.3rem, 2vw + 1.4rem, 3.1rem)/1.05 var(--titulo); letter-spacing: -0.04em; color: var(--acento-texto); text-align: right; }
.rp__grados input:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.rp__grados span { font: 600 1.25rem/1 var(--titulo); color: var(--ink-3); }
.rp__que { flex: 1 1 280px; margin: 0; color: var(--ink-2); line-height: 1.45; }
.rp__play { flex: none; padding: 12px 20px; }
.rp__play svg { width: 18px; height: 18px; fill: currentColor; }
.rp__play[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.rp__escena { grid-area: escena; position: relative; isolation: isolate; padding: 14px 16px 12px; background: var(--bg-2); --calor: 0; }
.rp__escena::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(95% 80% at 50% 108%, rgba(239, 90, 36, 0.5), rgba(239, 90, 36, 0) 70%); opacity: var(--calor); }
.rp__nombres { display: grid; grid-template-columns: 1fr 1fr; max-width: 820px; margin-inline: auto; text-align: center; font-size: 0.86rem; font-weight: 600; color: var(--ink-2); }
#rp-svg { display: block; width: 100%; max-width: 820px; height: auto; margin: 4px auto 0; }
#rp-svg .rp-sol circle { fill: #fbbf24; }
#rp-svg .rp-sol line { stroke: #fbbf24; stroke-width: 5; stroke-linecap: round; }
#rp-svg .rp-llama-1 { fill: #ef5a24; opacity: 0.9; }
#rp-svg .rp-llama-2 { fill: #f59e0b; }
#rp-svg .rp-llama-3 { fill: #fde68a; }
#rp-svg .rp-lengua { transform-box: fill-box; transform-origin: 50% 100%; animation: rp-titila 1.6s ease-in-out infinite; }
#rp-svg .rp-lengua:nth-child(2n) { animation-duration: 1.25s; animation-delay: -0.4s; }
#rp-svg .rp-lengua:nth-child(3n) { animation-duration: 1.9s; animation-delay: -0.9s; }
#rp-svg .rp-apoyo { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
#rp-svg :is(.rp-pvc, .rp-al, .rp-acero, .rp-acero-liq, .rp-pa, .rp-charco) { stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; vector-effect: non-scaling-stroke; fill-rule: evenodd; }
#rp-svg .rp-acero { fill: #9aa3ad; }
#rp-svg .rp-acero--vivo { fill: #fbbf24; }
#rp-svg .rp-acero-liq { fill: url(#rp-g-acero-liq); }
#rp-svg .rp-al { fill: url(#rp-g-al); }
#rp-svg .rp-charco { fill: url(#rp-g-liq); }
#rp-svg .rp-pa, #rp-svg .rp-gotas--pa .rp-gota { fill: #2f3338; }
#rp-svg .rp-gotas--al .rp-gota { fill: #c3cad2; stroke: var(--ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
#rp-svg .rp-gotas--acero .rp-gota { fill: #fbbf24; }
#rp-svg .rp-gota { animation: rp-cae 1.5s ease-in infinite; }
#rp-svg .rp-gota:nth-child(2) { animation-delay: -0.5s; }
#rp-svg .rp-gota:nth-child(3) { animation-delay: -1s; }
#rp-svg .rp-gota:nth-child(4) { animation-delay: -0.25s; }
#rp-svg .rp-bocanada { transform-box: fill-box; transform-origin: 50% 50%; animation: rp-sube 3.2s ease-out infinite; }
#rp-svg .rp-bocanada:nth-child(2) { animation-delay: -0.8s; }
#rp-svg .rp-bocanada:nth-child(3) { animation-delay: -1.6s; }
#rp-svg .rp-bocanada:nth-child(4) { animation-delay: -2.4s; }
#rp-svg .rp-hcl { fill: var(--ink-2); font: 600 22px var(--texto); }
@keyframes rp-titila { 0%, 100% { transform: scale(1, 1) skewX(0deg); } 35% { transform: scale(0.96, 1.07) skewX(2deg); } 70% { transform: scale(1.03, 0.94) skewX(-2deg); } }
@keyframes rp-sube { from { transform: translate(0, 0) scale(0.7); opacity: 0.9; } to { transform: translate(10px, -70px) scale(1.6); opacity: 0; } }
@keyframes rp-cae { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(70px); opacity: 0; } }
.rp__leyenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 6px 0 0; font-size: 0.78rem; color: var(--ink-3); }
.rp__leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.rp__leyenda i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--ink-3); }
.rp__leyenda .l-pvc { background: #f4f4f1; }
.rp__leyenda .l-acero { background: #9aa3ad; }
.rp__leyenda .l-al { background: linear-gradient(135deg, #dde1e6, #8a939d); }
.rp__leyenda .l-pa { background: #2f3338; }
.rp__lado { grid-area: lado; display: grid; gap: 20px; align-content: start; padding: 18px 20px; border-left: 1px solid var(--line); }
.rp__lado h2 { margin: 0 0 8px; font: 500 0.78rem/1.2 var(--texto); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.rp__mat p { margin: 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--line); font-size: 0.95rem; line-height: 1.45; color: var(--ink-2); transition: border-color 0.3s; }
.rp__mat p + p { margin-top: 8px; }
.rp__mat--pvc p:not([data-estado="normal"]) { border-left-color: var(--rp-pvc); color: var(--ink); }
.rp__mat--al p:not([data-estado="normal"]) { border-left-color: var(--rp-al); color: var(--ink); }
.rp__mat--al .rp__pa:not([data-estado="normal"]) { border-left-color: var(--rp-pa); }
.rp__otros ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.rp__otros li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 0.92rem; }
.rp__otros b { font-weight: 500; }
.rp__otros li span { font-size: 0.86rem; color: var(--ink-3); text-align: right; }
.rp__otros li:not([data-estado="normal"]) span { font-weight: 600; color: var(--ink); }
.rp__otros i { width: 20px; height: 20px; border-radius: 5px; transition: all 0.3s; }
.rp__otros [data-otro="madera"] i { background: #a0703f; }
.rp__otros [data-otro="madera"][data-estado="enciende"] i { background: #8a5a2e; box-shadow: 0 0 0 2px #f59e0b; }
.rp__otros [data-otro="madera"][data-estado="quema"] i { background: #3b2a1e; box-shadow: 0 0 10px 1px #ef5a24; }
.rp__otros [data-otro="vidrio"] i { background: linear-gradient(135deg, #d9eef8, #9cc5da); border: 1px solid #7aa9c2; }
.rp__otros [data-otro="vidrio"][data-estado="blando"] i { border-radius: 5px 5px 50% 50%; transform: skewX(-8deg) scaleY(0.85) translateY(2px); }
.rp__otros [data-otro="cobre"] i { background: linear-gradient(135deg, #e6a877, #b8703f); }
.rp__otros [data-otro="cobre"][data-estado="fundido"] i { height: 9px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 8px #f59e0b; }
.rp__otros [data-otro="acero"] i { background: linear-gradient(135deg, #c3c9d0, #7e8791); }
.rp__otros [data-otro="acero"][data-estado="fundiendo"] i { border-radius: 5px 5px 50% 50%; background: linear-gradient(#c3c9d0, #fbbf24); }
.rp__otros [data-otro="acero"][data-estado="fundido"] i { height: 9px; border-radius: 50%; background: #fde68a; box-shadow: 0 0 8px #fbbf24; }
.rp__escala { grid-area: escala; padding: 14px 20px 16px; border-top: 1px solid var(--line); }
.rp__etq { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin: 0 0 6px; font-size: 0.8rem; color: var(--ink-3); }
.rp__etq label { font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.rp-escala { --p: 0%; }
.rp-escala__marcas { position: relative; margin: 0 14px; height: calc(var(--filas, 0) * 22px + 8px); }
.rp-marca { position: absolute; bottom: calc(var(--fila, 0) * 22px + 8px); white-space: nowrap; font-size: 0.74rem; line-height: 16px; color: var(--ink-3); transition: color 0.3s; }
/* rayita desde la etiqueta hasta la escala, justo sobre su temperatura */
.rp-marca::before { content: ""; position: absolute; left: var(--linea, 0px); top: 100%; width: 2px; height: calc(var(--fila, 0) * 22px + 21px); margin-left: -1px; border-radius: 2px; background: var(--c); opacity: 0.45; }
.rp-marca.ya { color: var(--ink); }
.rp-marca.ya::before { opacity: 1; }
.rp-escala--compacta .rp-escala__marcas { height: 4px; visibility: hidden; }
.rp-escala__control { position: relative; height: 36px; }
.rp-escala__pista { position: absolute; left: 14px; right: 14px; top: 13px; height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.rp-escala__pista::before, .rp-escala__lleno { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #b9c7d4 0%, #f3c969 28%, #ef5a24 50%, #c0262d 72%, #f97316 88%, #fde68a 100%); }
.rp-escala__pista::before { opacity: 0.25; }
.rp-escala__lleno { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.rp-tick { position: absolute; top: 0; bottom: 0; z-index: 1; min-width: 3px; background: var(--c); opacity: 0.35; }
.rp-tick.ya { opacity: 1; }
.rp-escala input[type="range"] { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
.rp-escala input[type="range"]::-webkit-slider-runnable-track { height: 36px; border: 0; background: transparent; }
.rp-escala input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: 4px; border: 3px solid var(--acento); border-radius: 50%; background: var(--bg); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
.rp-escala input[type="range"]::-moz-range-track { height: 36px; border: 0; background: transparent; }
.rp-escala input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: 28px; height: 28px; border: 3px solid var(--acento); border-radius: 50%; background: var(--bg); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
.rp-escala input[type="range"]:focus-visible { outline: none; }
.rp-escala input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--acento); outline-offset: 3px; }
.rp-escala input[type="range"]:focus-visible::-moz-range-thumb { outline: 3px solid var(--acento); outline-offset: 3px; }
.rp-escala__numeros { position: relative; height: 18px; margin: 2px 14px 0; font-size: 0.74rem; color: var(--ink-3); }
.rp-escala__numeros span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.rp-bloque { margin-top: 56px; }
.rp-bloque > h2 { margin: 0 0 6px; font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem); line-height: 1.1; }
.rp-bloque > p { margin: 0 0 18px; max-width: 70ch; color: var(--ink-3); }
.rp-eventos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; border-top: 1px solid var(--line); }
.rp-eventos li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.rp-eventos__t { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 7px 12px; border: 0; border-radius: 999px; background: var(--bg-2); color: var(--ink); font: 600 0.84rem/1.2 var(--texto); white-space: nowrap; cursor: pointer; transition: background 0.2s, color 0.2s; }
.rp-eventos__t::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.rp-eventos__t:hover { background: var(--line); }
.rp-eventos li.ya .rp-eventos__t { background: var(--ink); color: var(--bg); }
.rp-eventos b { font-weight: 600; }
.rp-eventos p { margin: 3px 0 0; font-size: 0.93rem; line-height: 1.5; color: var(--ink-2); }
.rp-compara { border-top: 1px solid var(--ink); }
.rp-compara__cab, .rp-compara__fila { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px 28px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.rp-compara__cab { padding: 10px 0; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.rp-compara h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.rp-compara__fila p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); }
.rp-compara__quien { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rp-compara .rp-compara__nota { grid-column: 2 / -1; font-size: 0.86rem; color: var(--ink-3); }
.rp-compara__resumen { margin: 18px 0 0; max-width: 90ch; color: var(--ink-2); }
.rp-fuentes ol { display: grid; gap: 7px; margin: 0; padding-left: 22px; max-width: 110ch; font-size: 0.86rem; line-height: 1.5; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) {
  #rp-svg :is(.rp-lengua, .rp-bocanada, .rp-gota) { animation: none; }
  #rp-svg .rp-gota { transform: translateY(16px); }
}
@media (max-width: 980px) {
  .rp { grid-template-columns: minmax(0, 1fr); grid-template-areas: "barra" "escena" "escala" "lado"; }
  .rp__lado { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .rp-compara__cab { display: none; }
  .rp-compara__fila { grid-template-columns: minmax(0, 1fr); }
  .rp-compara__quien { position: static; display: block; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font-weight: 600; color: var(--ink); }
  .rp-compara .rp-compara__nota { grid-column: 1; }
  .rp-eventos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .rp__barra { gap: 8px 14px; padding: 12px 14px; }
  .rp__que { order: 3; flex-basis: 100%; font-size: 0.92rem; }
  .rp__play { margin-left: auto; }
  .rp__escena { padding: 10px 6px; }
  .rp__lado { padding: 16px 14px; }
  .rp__escala { padding: 12px 8px 14px; }
  .rp__etq { padding: 0 6px; }
  .rp-eventos li { grid-template-columns: minmax(0, 1fr); }
}

/* ── Buscador del sitio ───────────────────────────────────────────────── */

.top__herr { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.top__herr .tema { margin-left: 0; }
.busca-boton { display: inline-flex; align-items: center; gap: 9px; height: 40px; min-width: 200px; padding: 0 7px 0 13px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); font-size: 0.9rem; transition: box-shadow 0.2s, color 0.2s, background-color 0.2s; }
.busca-boton:hover { box-shadow: inset 0 0 0 1px var(--ink-3); color: var(--ink); }
.busca-boton .lupa { width: 18px; height: 18px; flex: none; }
.busca-boton__txt { flex: 1; }
.busca-boton kbd { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 7px; background: var(--bg-2); font: 500 0.78rem/1 var(--texto); color: var(--ink-3); }
@media (max-width: 1100px) {
  .top__herr { gap: 2px; }
  .busca-boton { min-width: 0; width: 40px; padding: 0; justify-content: center; box-shadow: none; color: var(--ink-2); border-radius: 50%; }
  .busca-boton:hover { box-shadow: none; background: var(--bg-2); }
  .busca-boton .lupa { width: 20px; height: 20px; }
  .busca-boton__txt, .busca-boton kbd { display: none; }
}

html.busca-abierta { overflow: hidden; }
.busca { width: min(680px, calc(100vw - 32px)); max-width: none; max-height: min(80vh, 760px); margin: 9vh auto auto; padding: 0; border: 1px solid var(--line); border-radius: calc(var(--r) + 6px); background: var(--bg); color: var(--ink); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3); overflow: hidden; }
.busca[open] { display: flex; flex-direction: column; animation: subir 0.22s var(--ease); }
.busca::backdrop { background: rgba(8, 8, 9, 0.5); }
.busca__form { display: flex; align-items: center; gap: 12px; flex: none; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--line); }
.busca__form .lupa { width: 20px; height: 20px; flex: none; color: var(--ink-3); }
.busca__form input { flex: 1; min-width: 0; height: 40px; padding: 0; border: 0; outline: 0; background: transparent; font-size: 1.1rem; }
.busca__form input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.busca__cerrar { flex: none; padding: 7px 9px; border: 0; border-radius: 8px; background: var(--bg-2); color: var(--ink-3); font: 500 0.78rem/1 var(--texto); cursor: pointer; }
.busca__cerrar:hover { color: var(--ink); }
.busca__cancelar { display: none; }
.busca__res { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 12px; }
.busca-grupo { padding-top: 10px; }
.busca-grupo__t { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 4px 12px 6px; font: 600 0.72rem/1.2 var(--texto); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.busca-grupo__t span { font-weight: 500; letter-spacing: 0; }
.busca-grupo ul { list-style: none; margin: 0; padding: 0; }
.busca-item { display: grid; gap: 3px; padding: 9px 12px 10px; border-radius: 10px; }
.busca-item:hover, .busca-item:focus-visible { background: var(--bg-2); }
.busca-item:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.busca-item__t { font-weight: 600; line-height: 1.35; color: var(--ink); }
.busca-item__d { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.86rem; line-height: 1.5; color: var(--ink-2); }
.busca-item__m { font-size: 0.76rem; color: var(--ink-3); }
.busca mark, .buscar mark { background: color-mix(in srgb, var(--acento) 24%, transparent); color: inherit; border-radius: 3px; }
.busca-mas { display: inline-block; margin: 2px 12px 4px; padding: 4px 0; border: 0; background: none; font: 500 0.85rem/1.4 var(--texto); color: var(--acento-texto); cursor: pointer; }
.busca-mas:hover { text-decoration: underline; }
.busca-todo { display: block; margin: 12px 8px 2px; padding: 12px; border-radius: 10px; background: var(--bg-2); text-align: center; font-size: 0.92rem; font-weight: 500; }
.busca-todo:hover { color: var(--acento-texto); }
.busca-nota { padding: 14px 12px 6px; font-size: 0.92rem; color: var(--ink-2); }
.busca-nota p { margin: 0 0 12px; }
.busca-nota a { color: var(--acento-texto); font-weight: 500; }
.busca-ej { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.busca-ej button { padding: 8px 14px; border: 0; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); font-size: 0.86rem; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.busca-ej button:hover { background: var(--ink); color: var(--bg); }
@media (max-width: 640px) {
  .busca { width: 100%; height: 100%; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .busca[open] { animation: none; }
  .busca__form { padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px 16px; }
  .busca__esc { display: none; }
  .busca__cancelar { display: inline; }
  .busca__cerrar { padding: 10px 8px; background: none; color: var(--acento-texto); font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) { .busca[open] { animation: none; } }
.busca-fila { display: none; }
@media (max-width: 640px) {
  .top__herr .busca-boton { display: none; }
  .secciones .wrap { display: flex; align-items: center; gap: 4px; }
  .secciones__in { flex: 1; min-width: 0; }
  .busca-fila { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-right: -10px; border-radius: 50%; color: var(--ink-2); }
  .busca-fila:hover { background: var(--bg-2); color: var(--ink); }
  .busca-fila .lupa { width: 20px; height: 20px; }
}
/* en los celulares angostos, Mi proyecto respeta el margen */
@media (max-width: 400px) { .top__cta { padding: 10px 14px; } }

.buscar { padding-top: 40px; }
.buscar__form { display: flex; gap: 10px; max-width: 760px; margin-top: 26px; }
.buscar__form input { flex: 1; min-width: 0; height: 54px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-size: 1.05rem; }
.buscar__form input:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.buscar__filtros { margin-top: 22px; scroll-margin-top: 80px; }
.buscar__estado { margin: 18px 0 0; font-size: 0.9rem; color: var(--ink-3); }
.buscar__res { max-width: 860px; }
.buscar .busca-grupo { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.buscar .busca-grupo__t { font-size: 0.78rem; }
.buscar .busca-item__t { font-size: 1.05rem; }
.buscar .busca-nota { padding-inline: 0; }
.buscar .busca-mas-btn { margin: 10px 12px 4px; }
@media (max-width: 640px) { .buscar__form .btn { padding-inline: 18px; } }

/* ── Movimiento y detalles ────────────────────────────────────────────── */

/* Portada: la destacada, dos notas al lado y "Ver más noticias" */
.hero__lado--dos li a { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.hero__lado--dos li a > div { grid-row: 2; }
.hero__lado--dos .media { grid-column: 1; grid-row: 1; aspect-ratio: 16 / 9; border-radius: var(--r); }
.hero__lado--dos h3 { font-size: 1.15rem; }
@media (max-width: 980px) {
  .hero__lado--dos li a { grid-template-columns: minmax(0, 1fr) 96px; gap: 16px; }
  .hero__lado--dos li a > div { grid-row: 1; }
  .hero__lado--dos .media { grid-column: 2; aspect-ratio: 1; border-radius: 10px; }
}
.hero__mas { display: flex; justify-content: center; padding-top: 40px; }
.hero__mas .btn { padding: 15px 30px; font-size: 1rem; }
.hero__mas .btn span, .herr-card__ir { transition: transform 0.35s var(--ease); }
.hero__mas .btn:hover span { transform: translateX(5px); }
@media (max-width: 640px) { .hero__mas .btn { width: 100%; } }

/* Grilla de plano detrás del comienzo de la portada */
.portada { position: relative; isolation: isolate; }
.portada::before { content: ""; position: absolute; inset: 0 0 auto; height: min(1200px, 140vh); z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grilla) 1px, transparent 1px), linear-gradient(90deg, var(--grilla) 1px, transparent 1px);
  background-size: 28px 28px; background-position: center top;
  -webkit-mask-image: linear-gradient(#000, rgba(0, 0, 0, 0.5) 50%, transparent); mask-image: linear-gradient(#000, rgba(0, 0, 0, 0.5) 50%, transparent); }

/* Herramientas: al pasar el mouse el dibujo se levanta, se rellena y la cota "camina" */
.herr-card__icono svg { transition: transform 0.45s var(--ease); }
.herr-card__icono svg .r { transition: fill 0.3s; }
.herr-card--lista:hover .herr-card__icono svg { transform: translateY(-3px); }
.herr-card--lista:hover .herr-card__icono svg .r { fill: color-mix(in srgb, var(--acento) 18%, var(--relleno)); }
.herr-card--lista:hover .herr-card__ir { transform: translateX(4px); }

/* Indicadores: la línea se traza cuando aparece (el número lo anima site.js) */
.ind-mini--traza .spark polyline { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trazar-linea 1.4s 0.15s var(--ease) forwards; }

@media (prefers-reduced-motion: no-preference) {
  .herr-card--lista:hover .herr-card__icono svg .c { stroke-dasharray: 5 4; animation: cota-viva 0.9s linear infinite; }
  /* Al bajar, cada bloque sube apenas mientras aparece (solo navegadores que lo saben hacer) */
  @supports (animation-timeline: view()) {
    .herr-card, .ind-mini, .curso li, .hero__lado li, .grilla .card, .marca, .faq > div, .carta-fija {
      animation: subir-vista linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}
@keyframes cota-viva { to { stroke-dashoffset: -18; } }
@keyframes trazar-linea { to { stroke-dashoffset: 0; } }
@keyframes subir-vista { from { opacity: 0; transform: translateY(22px); } }

/* Entre páginas: la cabecera queda quieta, el contenido cambia suave y la foto de la nota
   viaja de la tarjeta a su página (Chrome, Edge y Safari; en los demás se navega igual) */
@view-transition { navigation: auto; types: pagina; }
.ticker { view-transition-name: ticker; }
.top { view-transition-name: cabecera; }
.secciones { view-transition-name: secciones; }
.media[style*="view-transition-name"] { view-transition-class: foto; }
::view-transition-group(ticker), ::view-transition-group(cabecera), ::view-transition-group(secciones) { animation: none; }
:root:active-view-transition-type(pagina)::view-transition-old(root) { animation: 0.18s ease-in both vt-salir; }
:root:active-view-transition-type(pagina)::view-transition-new(root) { animation: 0.34s var(--ease) both vt-entrar; }
::view-transition-group(*.foto) { animation-duration: 0.5s; animation-timing-function: var(--ease); }
::view-transition-old(*.foto), ::view-transition-new(*.foto) { height: 100%; object-fit: cover; }
@keyframes vt-salir { to { opacity: 0; } }
@keyframes vt-entrar { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Brillo de aluminio: al pasar el mouse, un reflejo de luz cruza los botones llenos, como sobre
   metal pulido. El botón flotante de WhatsApp lo hace una vez cuando aparece. */
.btn:not(.btn--linea) { position: relative; overflow: hidden; isolation: isolate; }
.btn:not(.btn--linea)::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.5) 50%, transparent 68%); transform: translateX(-130%); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:not(.btn--linea):hover { opacity: 1; }
  .btn:not(.btn--linea):hover::after { transform: translateX(130%); transition: transform 0.8s var(--ease); }
}
@media (prefers-reduced-motion: no-preference) {
  .cta-flotante .btn::after { animation: brillo 1.3s 0.9s var(--ease) both; }
}
@keyframes brillo { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
/* Celular: el menú en dos niveles (pedido del 2/10/2026). Arriba las secciones del sitio con la lupa;
   abajo las herramientas o las secciones de noticias. Las dos filas se deslizan con flechas. */
@media (max-width: 900px) {
  .secciones .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .secciones__fila { display: flex; align-items: center; gap: 4px; min-width: 0; }
  .secciones__fila--menu { display: flex; border-bottom: 1px solid var(--line); }
  .secciones__fila:not(.secciones__fila--menu) .secciones__logo { display: none; }
  .secciones--pegada .secciones__logo { margin-right: 10px; }
  .chip-nav--herr { color: var(--ink-2); font-weight: 600; }
  .chip-nav--herr[aria-current] { color: var(--ink); }
  .chip-nav { padding: 11px 0 10px; }
}
@media (max-width: 640px) {
  .pedido { padding: 14px 16px; }
  .pedido h2 { font-size: 1.08rem; }
  .pedido__plegar #p-total { font-size: 0.92rem; }
}

/* ── Optimizador de cortes ─────────────────────────────────────────────────── */
.k-tablero { grid-template-columns: 390px minmax(0, 1fr); }
.k-lamina { grid-template-rows: auto auto 1fr; }
.k-lamina .rotulo-calc .chico { grid-column: span 2; }
.k-link { padding: 0; border: 0; background: none; color: var(--acento-texto); font: inherit; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.k-grupos { display: grid; gap: 14px; }
.k-grupo { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.k-grupo__cab { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.k-grupo__cab .k-link { font-size: 0.82rem; letter-spacing: 0; text-transform: none; }
.k-perfil { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.k-perfil div { display: grid; gap: 2px; min-width: 0; }
.k-perfil b { font-weight: 600; }
.k-perfil span { font-size: 0.82rem; color: var(--ink-3); }
.k-perfil span a { color: var(--acento-texto); text-decoration: underline; text-underline-offset: 2px; }
.k-buscar { position: relative; display: grid; gap: 6px; }
.k-buscar input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-size: 0.92rem; }
.k-buscar input:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.k-sugerencias { position: absolute; z-index: 5; top: 46px; left: 0; right: 0; max-height: 290px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14); }
.k-sugerencias button { display: grid; gap: 1px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.k-sugerencias button:hover, .k-sugerencias button:focus-visible { background: var(--bg-2); outline: none; }
.k-sugerencias span { font-size: 0.8rem; color: var(--ink-3); }
.k-sin { padding: 8px 10px; font-size: 0.85rem; color: var(--ink-3); }
.k-ayuda { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--ink-3); }
.k-ayuda a { color: var(--acento-texto); text-decoration: underline; text-underline-offset: 3px; }
.k-filas { display: grid; gap: 6px; }
.k-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr) minmax(0, 1.25fr) 28px; gap: 6px; align-items: center; }
/* Ventanas y marcos: cada corte suma la columna de su ángulo */
.k-marcos .k-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr) 38px minmax(0, 1.25fr) 28px; }
.k-fila--cab { font-size: 0.72rem; color: var(--ink-3); }
.k-fila input { width: 100%; min-width: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.k-fila input[data-k="nombre"] { font-size: 0.88rem; }
.k-fila input:focus-visible { outline: 2px solid var(--acento); outline-offset: 0; border-color: transparent; }
.k-fila input[aria-invalid] { border-color: var(--mal); }
.k-borrar { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-3); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.k-borrar:hover { background: var(--bg-2); color: var(--ink); }
.k-agregar { justify-self: start; font-size: 0.88rem; text-decoration: none; }
.k-otro { justify-self: start; }
.k-aviso { margin: 0; font-size: 0.85rem; color: var(--mal); }
.k-aviso:empty { display: none; }
.medida.mal { border-bottom-color: var(--mal); }
/* El plan: una barra por tira a escala del largo, cada medida con su color; lo rayado sobra */
.k-plan { display: grid; gap: 28px; padding: 20px 18px 22px; border-top: 1px solid var(--line); }
.k-res { display: grid; gap: 10px; }
.k-res h3 { margin: 0; font-size: 1.05rem; }
.k-res h3 a { margin-left: 6px; font: 400 0.82rem var(--texto); color: var(--ink-3); }
.k-res__sub { margin: 0; font-size: 0.9rem; color: var(--ink-2); }
.k-tiras { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.k-tira { display: grid; gap: 6px; }
.k-tira__cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 0.86rem; }
.k-tira__cab b { font-weight: 600; }
.k-tira__cab b span { font-weight: 600; }
.k-veces { padding: 1px 8px; border-radius: 999px; background: var(--bg-2); font-size: 0.78rem; color: var(--ink-2); }
.k-tira__sobra { margin-left: auto; font-size: 0.82rem; color: var(--ink-3); }
/* cada pieza va donde la ubica el cálculo; lo que queda sin pieza (los triángulos de los ingletes) se ve rayado */
.k-barra { position: relative; height: 34px; overflow: hidden; border: 1px solid var(--ink); border-radius: 4px; background: var(--bg); }
.k-barra--ing { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--line) 5px 6px), var(--bg); }
.k-barra > span { position: absolute; top: 0; bottom: 0; display: grid; place-items: center; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 0.74rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.k-seg + .k-seg, .k-desp + .k-seg { border-left: 2px solid var(--bg); }
/* puntas a 45°: --ai y --ad son lo que se come cada punta (el ancho del perfil a escala) */
/* (1 px adentro de cada lado: entre dos piezas queda la línea del corte, como en los cortes rectos) */
.k-barra > .k-seg--ing { border-left: 0; clip-path: polygon(calc(var(--ai) + 1px) 0, calc(100% - var(--ad) - 1px) 0, calc(100% - 1px) 100%, 1px 100%); }
.k-barra > .k-seg--arriba { clip-path: polygon(1px 0, calc(100% - 1px) 0, calc(100% - var(--ad) - 1px) 100%, calc(var(--ai) + 1px) 100%); }
.k-desp { background: repeating-linear-gradient(135deg, var(--ink-3) 0 2px, transparent 2px 5px); }
.k-barra > .k-sobra { border-left: 1px dashed var(--ink-3); background: repeating-linear-gradient(135deg, transparent 0 5px, var(--line) 5px 6px); font-weight: 500; color: var(--ink-3); }
.k-c0 { background: color-mix(in srgb, var(--acento) 26%, var(--bg)); }
.k-c1 { background: color-mix(in srgb, var(--ink) 13%, var(--bg)); }
.k-c2 { background: color-mix(in srgb, var(--acento) 50%, var(--bg)); }
.k-c3 { background: color-mix(in srgb, var(--ink) 26%, var(--bg)); }
.k-c4 { background: color-mix(in srgb, var(--acento) 12%, var(--bg)); }
.k-c5 { background: color-mix(in srgb, var(--ink) 6%, var(--bg)); }
.k-leyenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 0.8rem; color: var(--ink-2); }
.k-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.k-leyenda i { width: 12px; height: 12px; border: 1px solid var(--ink-3); border-radius: 3px; }
.k-sobrantes { margin: 0; font-size: 0.84rem; color: var(--ink-3); }
.k-vacio { margin: 0; color: var(--ink-3); }
.k-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--mal) 10%, var(--bg)); font-size: 0.9rem; color: var(--ink); }
/* el ángulo de cada corte: se toca y pasa de recto a 45° en las dos puntas y a 45° en una */
.k-ang { display: grid; place-items: center; width: 38px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink-3); cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.k-ang svg { width: 24px; height: 12px; fill: color-mix(in srgb, var(--ink) 8%, var(--bg)); stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.k-ang:hover { border-color: var(--ink-3); color: var(--ink); }
.k-ang:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.k-ang--45 { border-color: var(--acento); color: var(--acento-texto); }
.k-ang--45 svg { fill: color-mix(in srgb, var(--acento) 24%, var(--bg)); }
.k-ingletes { display: grid; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--line); }
.k-ingletes .medida.mal input { color: var(--mal); }
.k-alterna { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font-size: 0.85rem; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.k-alterna input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--acento); }
.k-alterna b { font-weight: 600; color: var(--ink); }

/* Armá un marco: ventana, puerta o cuadro */
.k-marco-abrir { display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 12px; align-items: center; width: 100%; padding: 12px 14px; border: 1px dashed var(--ink-3); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.k-marco-abrir:hover { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 5%, var(--bg)); }
.k-marco-abrir:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.k-marco-abrir[aria-expanded="true"] { border-style: solid; border-color: var(--acento); border-bottom-color: transparent; border-radius: 12px 12px 0 0; }
.k-marco-abrir .k-marco-abrir__flecha { width: 20px; height: 20px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease); }
.k-marco-abrir[aria-expanded="true"] .k-marco-abrir__flecha { transform: rotate(180deg); stroke: var(--acento); }
/* abierto, el encabezado y el armado son una sola tarjeta */
.k-desplegable { display: grid; }
.k-desplegable .k-marco { border-top: 0; border-radius: 0 0 12px 12px; }
.k-marco-abrir svg { width: 40px; height: 40px; fill: none; stroke: var(--acento); stroke-width: 2; stroke-linejoin: round; }
.k-marco-abrir > span { display: grid; gap: 2px; }
.k-marco-abrir b { font-weight: 600; }
.k-marco-abrir > span > span { font-size: 0.82rem; line-height: 1.4; color: var(--ink-3); }
.k-marco { display: grid; gap: 14px; padding: 14px; border: 1px solid var(--acento); border-radius: 12px; }
.k-marco[hidden], .k-marco-abrir[hidden] { display: none; }
.k-marco__datos, .k-marco__resultado { display: grid; gap: 14px; align-content: start; min-width: 0; }
/* En la compu, apaisado: los datos arriba, a lo ancho, y el plan de corte abajo a todo el ancho (las tiras se leen
   mejor largas); "Ventanas y marcos" en dos columnas, las medidas y al lado el dibujo con sus piezas */
@media (min-width: 981px) {
  .k-tablero { grid-template-columns: minmax(0, 1fr); }
  .k-tablero > .controles { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: start; gap: clamp(24px, 3vw, 44px); }
  .k-marco { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; }
  .k-marco__cab { grid-column: 1 / -1; }
  /* Ventanas y marcos: arriba siguen los cortes y la tira, lado a lado; la tarjeta del marco se despliega debajo de
     la lista de cortes, a todo el ancho */
  #t-cortes.k-abierto .k-tablero > .controles { row-gap: 12px; }
  #t-cortes.k-abierto .k-tablero > .controles > .ctrl:first-child { display: contents; }
  #t-cortes.k-abierto .k-tablero > .controles > .ctrl:first-child > * { grid-column: 1; }
  #t-cortes.k-abierto .k-tablero > .controles > .ctrl:first-child > .k-desplegable { grid-column: 1 / -1; margin-top: 12px; }
  #t-cortes.k-abierto .k-tablero > .controles > .ctrl:last-child { grid-column: 2; grid-row: 1 / span 5; }
  .k-lamina .rotulo-calc .grande, .k-lamina .rotulo-calc .chico { grid-column: span 1; }
  .k-lamina .rotulo-calc .chico { padding: 18px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
  .k-lamina .rotulo-calc .chico dd { font: 600 1.35rem/1.1 var(--titulo); margin-top: 6px; }
}
.k-marco__cab { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 6px 14px; }
.k-marco__cab b { font: 600 1.05rem/1.2 var(--titulo); }
.k-marco__cab .k-link { font-size: 0.86rem; }
.k-opciones { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.k-opciones legend { float: left; width: 100%; margin-bottom: 6px; padding: 0; font-size: 0.76rem; color: var(--ink-3); }
.k-opciones label { position: relative; }
.k-opciones input { position: absolute; opacity: 0; pointer-events: none; }
.k-opciones span { display: inline-flex; align-items: baseline; gap: 5px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.86rem; cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.k-opciones span:hover { border-color: var(--ink-3); }
.k-opciones small { font-size: 0.74rem; color: var(--ink-3); }
.k-opciones input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.k-opciones input:checked + span small { color: color-mix(in srgb, var(--bg) 72%, transparent); }
.k-opciones input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.k-marco__medidas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.k-marco__vista svg { display: block; width: 100%; max-height: 300px; overflow: visible; }
.k-marco__vista path { stroke: var(--ink); stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.k-marco__vista .k-m-h { fill: color-mix(in srgb, var(--acento) 26%, var(--bg)); }
.k-marco__vista .k-m-v { fill: color-mix(in srgb, var(--ink) 13%, var(--bg)); }
.k-marco__vista .k-m-d { fill: color-mix(in srgb, var(--acento) 50%, var(--bg)); }
.k-m-cota line, .k-m-piso { stroke: var(--ink-3); vector-effect: non-scaling-stroke; }
.k-m-piso { stroke-width: 2px; stroke-dasharray: 6 4; }
.k-m-cota text { fill: var(--ink-2); stroke: none; font-family: var(--texto); }
.k-marco__lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.k-marco__lista:empty { display: none; }
.k-marco__lista li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.k-marco__lista li > span { display: grid; gap: 1px; }
.k-marco__lista b { font-weight: 600; font-variant-numeric: tabular-nums; }
.k-marco__lista small { font-size: 0.8rem; color: var(--ink-3); }
.k-marco__lista i { width: 12px; height: 12px; border: 1px solid var(--ink-3); border-radius: 3px; transform: translateY(1px); }
.k-marco__lista i.k-m-h { background: color-mix(in srgb, var(--acento) 26%, var(--bg)); }
.k-marco__lista i.k-m-v { background: color-mix(in srgb, var(--ink) 13%, var(--bg)); }
.k-marco__lista i.k-m-d { background: color-mix(in srgb, var(--acento) 50%, var(--bg)); }
.k-marco__error, .k-marco__estado { margin: 0; font-size: 0.86rem; }
.k-marco__error { color: var(--mal); }
.k-marco__estado { color: var(--acento-texto); font-weight: 500; }
.k-marco__error:empty, .k-marco__estado:empty { display: none; }
.k-marco > .btn { justify-self: start; }
@media (max-width: 980px) {
  .k-tablero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .k-plan { padding: 18px 14px 20px; }
  .k-grupo { padding: 12px; }
  /* en el celular el resultado va en dos filas de tres */
  .k-lamina .rotulo-calc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .k-lamina .rotulo-calc .grande, .k-lamina .rotulo-calc .chico { grid-column: span 1; padding: 12px; }
  .k-lamina .rotulo-calc .grande + .grande, .k-lamina .rotulo-calc .chico + .chico { border-left: 1px solid var(--line); }
  .k-lamina .rotulo-calc .grande dd { font-size: 1.55rem; }
  .k-lamina .rotulo-calc .grande dd small { margin-left: 3px; font-size: 0.78rem; }
  .k-lamina .rotulo-calc dd { font-size: 0.86rem; }
}

/* ── Cotizá tu matriz ──────────────────────────────────────────────────────── */
.mz-caja { max-width: 780px; margin-top: 32px; }
.mz { display: grid; gap: 22px; }
.mz-paso { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 20px 22px 22px; border: 1px solid var(--line); border-radius: var(--r); }
.mz-paso legend { display: flex; align-items: center; gap: 10px; margin-left: -8px; padding: 0 8px; font: 600 1.05rem var(--titulo); color: var(--ink); }
.mz-paso legend span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--acento); color: var(--acento-ink); font: 700 0.85rem var(--texto); }
.mz-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mz-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mz-zona--lista { border-style: solid; border-color: var(--acento); }
.mz-archivo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font-size: 0.92rem; }
.mz-archivo span { font-size: 0.85rem; color: var(--ink-3); }
.mz-cede { font-size: 0.9rem; color: var(--ink); }
.mz .btn--grande { justify-self: start; }
.mz-listo { margin: 0; padding: 18px 20px; border-radius: var(--r); background: color-mix(in srgb, var(--bien) 12%, var(--bg)); font-size: 1.02rem; line-height: 1.5; color: var(--ink); }
@media (max-width: 640px) {
  .mz-paso { padding: 16px 14px 18px; }
  .mz-dos, .mz-datos { grid-template-columns: minmax(0, 1fr); }
}

/* ── AOG Patagonia 2026: la página a la que lleva el QR de la feria ─────────────────────────── */
.aog__cab .herr__cab { margin-bottom: 28px; }
.aog__cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.aog__cifras li { display: grid; gap: 6px; align-content: start; padding: 20px 20px 4px 0; }
.aog__cifras li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.aog__cifras b { font: 700 clamp(1.8rem, 2.6vw, 2.6rem)/1 var(--titulo); letter-spacing: -0.035em; color: var(--acento); }
.aog__cifras span { font-size: 0.9rem; line-height: 1.45; color: var(--ink-2); }
.aog__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.aog__lista li { display: grid; gap: 4px; align-content: start; padding: 18px 20px 18px 0; border-bottom: 1px solid var(--line); }
.aog__lista li:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); }
.aog__lista b { font-size: 1.05rem; font-weight: 600; }
.aog__lista span { color: var(--ink-2); }
.aog__lista a { color: var(--acento-texto); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .aog__cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aog__cifras li:nth-child(3) { padding-left: 0; border-left: 0; }
  .aog__cifras li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .aog__lista { grid-template-columns: minmax(0, 1fr); }
  .aog__lista li:nth-child(even) { padding-left: 0; border-left: 0; }
}

/* ── Flecha, dentro de la calculadora de peso ───────────────────────────────────────────────── */
.flecha { display: grid; gap: 22px; margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.flecha__cab { display: grid; gap: 10px; justify-items: start; max-width: 760px; }
.flecha__cab h2 { margin: 0; font-size: clamp(1.7rem, 1.4vw + 1rem, 2.4rem); line-height: 1.05; text-wrap: balance; }
.flecha__cab p { margin: 0; color: var(--ink-2); max-width: 62ch; }
.flecha__grid { display: grid; grid-template-columns: 390px minmax(0, 1fr); gap: 28px; align-items: start; }
.flecha__datos { display: grid; gap: 16px; }
.flecha__res { display: grid; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.flecha__dibujo { padding: 14px 16px 4px; }
.flecha__dibujo svg { display: block; width: 100%; height: auto; max-height: 220px; }
.flecha__rotulo .grande { grid-column: span 3; }
.flecha__rotulo .chico { grid-column: span 2; }
@media (max-width: 640px) { .flecha__rotulo .grande { grid-column: span 2; } .flecha__rotulo .chico { grid-column: span 1; } }
.flecha .f-recta { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 5 4; }
.flecha .f-deformada { fill: none; stroke: var(--acento); stroke-width: 6; stroke-linecap: round; }
.flecha .f-apoyo { fill: var(--bg-2); stroke: var(--ink); stroke-width: 1.5; }
.flecha .f-suelo, .flecha .f-pared, .flecha .f-carga, .flecha .f-carga-punta, .flecha .f-cota { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.flecha .f-suelo { stroke: var(--ink); stroke-width: 1.5; }
.flecha .f-pared { stroke: var(--ink); stroke-width: 3; }
.flecha .f-carga, .flecha .f-carga-punta { stroke: var(--ink-2); stroke-width: 1.5; }
.flecha .f-cota { stroke: var(--ink-3); stroke-width: 1; }
.flecha svg text { fill: var(--ink-2); font: 500 13px var(--texto); }
.flecha svg .f-etq { fill: var(--acento-texto); font-weight: 600; }
.flecha__res .calc-error { margin: 0 16px 16px; }
.f-veredicto { display: grid; gap: 8px; margin: 0 16px 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 0.9rem; line-height: 1.5; }
.f-veredicto p { margin: 0; }
.f-veredicto--bien { background: color-mix(in srgb, var(--bien) 10%, var(--bg)); border-color: color-mix(in srgb, var(--bien) 40%, var(--line)); }
.f-veredicto--ojo { background: color-mix(in srgb, var(--ojo) 12%, var(--bg)); border-color: color-mix(in srgb, var(--ojo) 45%, var(--line)); }
.f-veredicto--mal { background: color-mix(in srgb, var(--mal) 10%, var(--bg)); border-color: color-mix(in srgb, var(--mal) 40%, var(--line)); }
@media (max-width: 900px) { .flecha__grid { grid-template-columns: minmax(0, 1fr); } }

.contacto__atajos { margin-top: 32px; }

/* ── Buscador: normalizados o catálogos por línea de Perfiles ───────────────────────────────── */
.b-sub { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--ink-3); }
.b-var { font-size: 0.78rem; color: var(--ink-3); }
.b-pdf { color: var(--acento-texto); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ── Calculadora de sueldo UOM (Documentos del sector) ───────────────────────────────────────── */
.sueldo { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: 36px; align-items: start; }
.sueldo__datos { display: grid; gap: 16px; }
.sueldo__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sueldo__par .medida[hidden] { display: none; }
.sueldo__rama, .sueldo__ayuda { margin: -8px 0 0; font-size: 0.8rem; color: var(--ink-3); }
.sueldo__check { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; cursor: pointer; }
.sueldo__check input { flex: none; width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--acento); }
.sueldo__res { display: grid; gap: 14px; }
.sueldo__que { margin: 0; font-size: 0.86rem; color: var(--ink-3); }
.sueldo__filas { margin: 0; border-top: 1px solid var(--line); }
.sueldo__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.sueldo__fila dt { color: var(--ink-2); font-size: 0.92rem; }
.sueldo__fila dd { margin: 0; font-weight: 600; white-space: nowrap; }
.sueldo__fila--sub dt { color: var(--ink); font-weight: 600; }
.sueldo__fila--total { padding: 16px 0; border-bottom-color: var(--ink); }
.sueldo__fila--total dt { color: var(--ink); font-weight: 600; font-size: 1rem; }
.sueldo__fila--total dd { font: 700 clamp(1.8rem, 2vw + 1rem, 2.6rem)/1 var(--titulo); letter-spacing: -0.03em; color: var(--acento); }
.sueldo__fila--neto dd { font: 700 1.4rem/1 var(--titulo); letter-spacing: -0.02em; }
.sueldo__piso, .sueldo__aviso { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--bg-2); font-size: 0.88rem; color: var(--ink-2); }
.sueldo__piso b { color: var(--ink); }
.sueldo__piso--abajo { background: color-mix(in srgb, var(--ojo) 14%, var(--bg)); }
.sueldo__fuente { margin: 0; font-size: 0.8rem; color: var(--ink-3); }
.sueldo__orientativo { margin: 24px 0 0; max-width: 760px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--acento) 45%, var(--line)); border-left: 4px solid var(--acento); border-radius: 10px; background: color-mix(in srgb, var(--acento) 7%, var(--bg)); font-size: 0.92rem; color: var(--ink-2); }
.sueldo__orientativo b { color: var(--ink); }
.sueldo__marca { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--acento) 14%, var(--bg)); color: var(--acento-texto); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 1px; }
.sueldo__cargando { margin: 0; color: var(--ink-3); }
.sueldo__escala { margin-top: clamp(48px, 6vw, 72px); }
.sueldo__escala .tabla-scroll { margin-top: 0; }
.sueldo-tabla { min-width: 420px; max-width: 760px; }
.sueldo-tabla tbody th { width: auto; color: var(--ink); font-size: 0.95rem; font-weight: 500; }
.sueldo-tabla td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sueldo-tabla small { font-weight: 400; color: var(--ink-3); }
.sueldo-tabla__grupo th { padding-top: 22px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3) !important; }
.sueldo-tabla__cat { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.sueldo-tabla__cat:hover { text-decoration-color: currentColor; }
.sueldo-tabla tr.es-elegida th, .sueldo-tabla tr.es-elegida td { color: var(--acento-texto); }
.sueldo__avisos { margin-top: clamp(48px, 6vw, 72px); }
.sueldo__avisos h2 { margin: 0 0 20px; font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem); }
@media (max-width: 900px) { .sueldo { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .sueldo__avisos .aog__lista { grid-template-columns: minmax(0, 1fr); } .sueldo__avisos .aog__lista li:nth-child(even) { padding-left: 0; border-left: 0; } }

/* ── Idiomas: el botón EN / ES de la barra de arriba y la versión en inglés ──────────────────── */
.idioma { flex: none; display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-2); transition: border-color 0.2s, color 0.2s; }
.idioma:hover { border-color: var(--ink); color: var(--ink); }
.herr-card__idioma { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--bg-2); font-size: 0.72rem; font-weight: 500; color: var(--ink-3); vertical-align: 1px; }
.pe { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: 36px; align-items: start; }
.pe__datos { display: grid; gap: 18px; }
.pe__campos { display: grid; gap: 12px; }
.pe__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pe__res { display: grid; gap: 14px; }
@media (max-width: 900px) { .pe { grid-template-columns: minmax(0, 1fr); } }

/* ── Lingo, el ayudante del sitio (assets/asistente.js) ─────────────────────────────────────────── */
.al-cara { width: 40px; height: 40px; flex: none; overflow: visible; }
.al-cara rect { fill: #ef5a24; }
.al-cara__n { fill: #ffe0d3; }
.al-cara__ojos { fill: #fff; transform-box: view-box; transform-origin: 24px 25px; animation: al-parpadeo 5.5s infinite; }
.al-cara__pupila { fill: #1a1a1a; }
.al-cara__boca { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
@keyframes al-parpadeo { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.12); } }
.al-boton { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 41; display: flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font-size: 0.9rem; font-weight: 600; box-shadow: 0 14px 36px -14px rgba(0, 0, 0, 0.45); transition: transform 0.2s var(--ease), box-shadow 0.2s; }
.al-boton:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.5); }
/* moverlo: el toque largo no selecciona texto ni abre el menú del sistema; mientras se arrastra, se agranda */
.al-boton { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
html.al-moviendo .al-boton { cursor: grabbing; transform: scale(1.08); box-shadow: 0 24px 48px -14px rgba(0, 0, 0, 0.55); transition: none; }
html.al-moviendo, html.al-moviendo * { -webkit-user-select: none; user-select: none; }
.al-boton:hover .al-cara__pupila { transform: translateY(-1px); }
.al-boton[aria-expanded="true"] .al-boton__txt::after { content: " · cerrar"; color: var(--ink-3); font-weight: 400; }
.al-panel { position: fixed; right: 20px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 42; display: flex; flex-direction: column; width: min(390px, calc(100vw - 40px)); max-height: min(74vh, 660px); border: 1px solid var(--line); border-radius: calc(var(--r) + 6px); background: var(--bg); color: var(--ink); box-shadow: 0 28px 80px -24px rgba(0, 0, 0, 0.55); overflow: hidden; animation: subir 0.25s var(--ease); }
.al-panel[hidden] { display: none; }
.al-panel__cab { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; border-bottom: 1px solid var(--line); }
.al-panel__cab .al-cara { width: 42px; height: 42px; }
.al-panel__cab b { display: block; font: 700 1.05rem/1.1 var(--titulo); }
.al-panel__cab span { font-size: 0.8rem; color: var(--ink-3); }
.al-panel__cerrar { margin-left: auto; width: 36px; height: 36px; border: 0; border-radius: 999px; background: none; color: var(--ink-3); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.al-panel__cerrar:hover { background: var(--bg-2); color: var(--ink); }
.al-panel__cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 12px; align-content: start; padding: 16px; }
.al-msg { display: grid; gap: 10px; max-width: 100%; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: var(--bg-2); font-size: 0.92rem; line-height: 1.5; }
.al-msg p { margin: 0; }
.al-msg a:not(.btn) { color: var(--acento-texto); text-decoration: underline; text-underline-offset: 3px; }
.al-msg--yo { justify-self: end; max-width: 85%; border-radius: 16px 16px 4px 16px; background: var(--ink); color: var(--bg); }
.al-atajos { display: flex; flex-wrap: wrap; gap: 6px; }
.al-atajo { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: 500 0.84rem/1.2 var(--texto); cursor: pointer; text-align: left; }
.al-atajo:hover { border-color: var(--ink); }
.al-tarjeta { display: grid; gap: 6px; justify-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.al-tarjeta b { font-size: 0.95rem; }
.al-tarjeta span { color: var(--ink-2); font-size: 0.86rem; }
.btn--chico { padding: 9px 14px; font-size: 0.84rem; }
.al-sub { font-size: 0.8rem !important; color: var(--ink-3); }
.al-links { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.al-links li { display: grid; }
.al-links small { font-size: 0.75rem; color: var(--ink-3); }
.al-ia { font-size: 0.74rem !important; color: var(--ink-3); }
.al-msg--pensando { justify-self: start; }
.al-puntos { display: inline-flex; gap: 4px; padding: 4px 2px; }
.al-puntos i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: al-punto 1s infinite; }
.al-puntos i:nth-child(2) { animation-delay: 0.15s; }
.al-puntos i:nth-child(3) { animation-delay: 0.3s; }
@keyframes al-punto { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.al-form { display: flex; gap: 8px; padding: 12px 14px 0; border-top: 1px solid var(--line); }
.al-form input { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: 400 0.95rem var(--texto); }
.al-form input:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.al-form__enviar { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--acento-texto); color: var(--acento-ink); cursor: pointer; }
.al-form__enviar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.al-aviso { margin: 0; padding: 8px 16px 12px; font-size: 0.72rem; line-height: 1.45; color: var(--ink-3); }
.al-aviso a { text-decoration: underline; }
/* Lingo va abajo a la derecha y el botón de WhatsApp, al medio. Con el panel abierto se ocultan los otros flotantes. */
html.al-abierto .cta-flotante, html.al-abierto .ir-arriba { visibility: hidden; }
/* En el buscador de perfiles, el pedido queda pegado abajo: Lingo y la flecha no lo tapan. Con el pedido plegado
   suben por arriba de la barra; en el celular, con el pedido abierto, se ocultan (en la compu Lingo queda chico). */
body:has(#pedido.plegado:not([hidden])) .al-boton { bottom: calc(102px + env(safe-area-inset-bottom, 0px)); }
body:has(#pedido.plegado:not([hidden])) .ir-arriba { bottom: calc(166px + env(safe-area-inset-bottom, 0px)); }
body:has(#pedido:not([hidden]):not(.plegado)) .al-boton { padding: 4px; }
body:has(#pedido:not([hidden]):not(.plegado)) .al-boton__txt { display: none; }
@media (max-width: 640px) {
  body:has(#pedido.plegado:not([hidden])) .al-quitar { bottom: calc(133px + env(safe-area-inset-bottom, 0px)); }
  body:has(#pedido.plegado:not([hidden])) .ir-arriba { bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
  body:has(#pedido:not([hidden]):not(.plegado)) :is(.al-boton, .al-quitar, .ir-arriba) { visibility: hidden; }
}
/* La × para ocultar a Lingo: solo en el celular, donde tapa lo que estás tocando (por ejemplo, al armar un pedido) */
.al-quitar { display: none; }
@media (max-width: 760px) {
  .al-boton { padding: 4px; }
  .al-boton__txt { display: none; }
}
@media (max-width: 640px) {
  .al-boton { right: 14px; }
  body:has(.cta-flotante) .al-boton { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .al-quitar { position: fixed; right: 9px; bottom: calc(51px + env(safe-area-inset-bottom, 0px)); z-index: 42; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink-2); box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.35); cursor: pointer; }
  .al-quitar::after { content: ""; position: absolute; inset: -6px; }
  .al-quitar svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
  body:has(.cta-flotante) .al-quitar { bottom: calc(115px + env(safe-area-inset-bottom, 0px)); }
  /* guardado con la ×: Lingo queda asomado en el borde derecho; tocándolo vuelve (assets/asistente.js) */
  html.al-oculto .al-quitar { display: none; }
  html.al-oculto .al-boton { right: 0; padding-right: 2px; border-right: 0; border-radius: 999px 0 0 999px; transform: translateX(18px); }
  html.al-oculto .al-boton:hover { transform: translateX(14px); }
  .al-panel { left: 8px; right: 8px; width: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); max-height: 84vh; max-height: 84dvh; }
  html.al-abierto .al-boton, html.al-abierto .al-quitar { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .al-cara__ojos, .al-puntos i { animation: none; } .al-panel { animation: none; } .al-boton:hover { transform: none; } }
@media print { .al-boton, .al-panel, .al-quitar { display: none !important; } }

/* ── Aviso de Google Analytics (assets/analitica.js; solo existe si hay un ID de medición) ─────── */
.consentimiento { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 45; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; width: min(760px, calc(100vw - 32px)); padding: 14px 16px 14px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--ink); box-shadow: 0 24px 70px -24px rgba(0, 0, 0, 0.5); font-size: 0.88rem; }
.consentimiento[hidden] { display: none; }
.consentimiento p { margin: 0; color: var(--ink-2); }
.consentimiento a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.consentimiento__botones { display: flex; gap: 8px; flex: none; }
@media (max-width: 640px) { .consentimiento { flex-direction: column; align-items: stretch; } .consentimiento__botones .btn { flex: 1; } }

/* ── Comparativas (/comparar/) ───────────────────────────────────────────────────────────────── */
.comparativa__resumen { margin-top: 32px; max-width: 78ch; }
.comparativa__resumen h2 { margin: 0 0 10px; font-size: 1.25rem; }
.comparativa__resumen .lista { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); }
.comparativa__tabla td { width: 39%; }
.comparativa__cuando { margin-top: 32px; }
.comparativa__herr { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r); transition: border-color 0.2s; }
.comparativa__herr:hover { border-color: var(--ink); }
.comparativa__ico { width: 72px; flex: none; }
.comparativa__ico svg { display: block; width: 100%; height: auto; }
.comparativa__herr b { display: block; }
.comparativa__herr span span { color: var(--acento-texto); font-size: 0.92rem; font-weight: 600; }
.comparativa__otras, .comparativa__banda { display: grid; gap: 10px; margin-top: 28px; }
.comparativa__grupo { display: grid; gap: 12px; margin-top: 32px; }
.comparativa__grupo h2 { margin: 0; font-size: 1.25rem; }
a.pill { display: inline-flex; align-items: center; text-decoration: none; }

/* ── Subí tu plano: ¿ya existe un perfil de catálogo parecido? ────────────────────────────────── */
.pl-existe { display: grid; gap: 10px; margin-top: 24px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); }
.pl-existe h2 { margin: 0; font-size: 1.25rem; }
.pl-existe p { margin: 0; color: var(--ink-2); max-width: 75ch; }
.pl-existe a { color: var(--acento-texto); }
.pl-existe__lista { display: grid; gap: 0; margin: 4px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.pl-existe__lista a { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.pl-existe__lista a:hover b { color: var(--acento-texto); }
.pl-existe__lista span { font-size: 0.86rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pl-existe__nota { font-size: 0.82rem !important; color: var(--ink-3) !important; }

/* ── Portada: ¿Qué hacés con el aluminio? ─────────────────────────────────────────────────────── */
.segmentos { display: grid; gap: 12px; margin: 0 0 32px; }
/* Portada: Lingo pregunta "¿Qué hacés con el aluminio?" entre la carta y las herramientas */
.lingo-q { margin-top: clamp(40px, 6vw, 72px); }
.lingo-q__caja { display: grid; justify-items: center; gap: 22px; margin: 0; padding: 0; border: 0; background: none; text-align: center; }
.lingo-q__charla { display: grid; justify-items: center; gap: 14px; }
.lingo-q .al-cara { width: 64px; height: 64px; }
.lingo-q__globo { display: grid; justify-items: center; gap: 6px; padding: 16px 28px 18px; border-radius: 22px; background: var(--lingo-globo); }
.lingo-q__quien { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acento-texto); }
.lingo-q h2 { margin: 0; font-size: clamp(1.35rem, 1vw + 1rem, 1.8rem); line-height: 1.15; } /* la pregunta de Lingo, más chica que los títulos */
.lingo-q__globo p { margin: 0; font-size: 0.98rem; color: var(--ink-2); }
.lingo-q .pills { justify-content: center; gap: 10px; max-width: 860px; }
.lingo-q .pill { padding: 12px 20px; background: var(--bg); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line); font-size: 0.95rem; transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
.lingo-q .pill:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.lingo-q .pill[aria-pressed="true"] { background: var(--acento-texto); color: var(--acento-ink); box-shadow: none; }
/* al tocar una respuesta, Lingo "escribe" un instante y contesta en otro globo (assets/site.js) */
.lingo-q__escribe { display: inline-flex; gap: 5px; padding: 15px 18px; border-radius: 18px; background: var(--lingo-globo); }
.lingo-q__escribe[hidden] { display: none; }
.lingo-q__escribe span { width: 7px; height: 7px; border-radius: 50%; background: var(--acento-texto); animation: lingo-punto 0.9s ease-in-out infinite; }
.lingo-q__escribe span:nth-child(2) { animation-delay: 0.15s; }
.lingo-q__escribe span:nth-child(3) { animation-delay: 0.3s; }
@keyframes lingo-punto { 0%, 80%, 100% { opacity: 0.3; transform: none; } 40% { opacity: 1; transform: translateY(-4px); } }
.lingo-q .segmento { justify-self: center; width: min(100%, 820px); gap: 12px; padding: 22px 26px; border: 0; border-radius: 22px; background: var(--lingo-globo); text-align: left; animation: lingo-contesta 0.4s var(--ease) both; }
@keyframes lingo-contesta { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.segmento__quien { display: block; margin-bottom: 4px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acento-texto); }
@media (prefers-reduced-motion: reduce) { .lingo-q__escribe span, .lingo-q .segmento { animation: none; } }
.segmento .segmento__dc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 6px; padding: 12px 16px; border: 1px solid var(--dc-borde); border-radius: 14px; background: var(--dc-fondo); color: #ffffff; font-size: 0.92rem; font-weight: 400; line-height: 1.4; text-decoration: none; }
.segmento__dc .dc__cursor { width: 15px; height: 19px; } .segmento__dc > span:not(.segmento__ir) { flex: 1 1 160px; min-width: 0; }
.segmento__dc b { color: #ff7a45; }
.segmento__ir { margin-left: auto; font-weight: 600; color: #ff7a45; white-space: nowrap; }
.segmento__dc:hover .segmento__ir { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .lingo-q .al-cara { width: 52px; height: 52px; } .segmento__ir { margin-left: 0; } .lingo-q .pill { padding: 9px 12px; font-size: 0.84rem; } }
.segmento { display: grid; gap: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); }
.segmento[hidden] { display: none; }
.segmento p { margin: 0; color: var(--ink-2); font-size: 0.92rem; }
.segmento ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; margin: 0; padding: 0; list-style: none; }
.segmento a { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.segmento a:hover { text-decoration-color: var(--acento); }
@media (max-width: 640px) { .segmento ul { grid-template-columns: minmax(0, 1fr); } }

/* ── La calculadora para otros sitios (/widget/peso) y el código para sumarla ─────────────────── */
body.widget { background: var(--bg); }
.widget__cuerpo { max-width: 760px; margin: 0 auto; padding: 16px; }
.widget__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 4px; font-size: 0.86rem; color: var(--ink-3); }
.widget__cuerpo .pe { margin-top: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.widget__pie { margin: 14px 0 0; font-size: 0.8rem; color: var(--ink-3); }
.widget__pie a, .widget__cuerpo .calc__nota a { color: var(--acento-texto); }
@media (max-width: 600px) { .widget__cuerpo .pe { grid-template-columns: minmax(0, 1fr); } }
.embeber { display: grid; gap: 12px; padding-top: clamp(40px, 5vw, 64px); max-width: 860px; }
.embeber h2 { margin: 0; font-size: clamp(1.4rem, 1vw + 1rem, 1.8rem); }
.embeber p { margin: 0; color: var(--ink-2); }
.embeber__codigo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); }
.embeber__codigo code { flex: 1 1 320px; min-width: 0; font: 500 0.82rem/1.5 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; color: var(--ink); }

/* ── Notas: "Para tu compra" al costado ───────────────────────────────────────────────────────── */
.aside-herr .aside-herr__chip { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acento-texto); }

/* ── Guía del aluminio: repaso de cada lección, avance y certificado (assets/quiz.js) ─────────── */
.quiz { display: grid; gap: 14px; margin-top: clamp(40px, 5vw, 64px); padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r); max-width: 860px; }
.quiz[hidden] { display: none; }
.quiz h2 { margin: 0; font-size: 1.5rem; }
.quiz > p { margin: 0; color: var(--ink-2); }
.quiz form { display: grid; gap: 16px; justify-items: start; }
.quiz__preguntas { display: grid; gap: 14px; width: 100%; }
.quiz__p { display: grid; gap: 8px; margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
.quiz__p legend { padding: 0 4px; font-weight: 600; }
.quiz__op { display: flex; align-items: flex-start; gap: 10px; padding: 6px 4px; border-radius: 8px; cursor: pointer; }
.quiz__op:hover { background: var(--bg-2); }
.quiz__op input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; padding: 0; border-radius: 50%; accent-color: var(--acento); }
.quiz__p--bien { border-color: var(--bien); }
.quiz__p--mal { border-color: var(--mal); }
.quiz__por { margin: 0; font-size: 0.88rem; color: var(--ink-2); }
.quiz__p--bien .quiz__por::before { content: "Bien. "; font-weight: 700; color: var(--bien); }
.quiz__p--mal .quiz__por::before { content: "Revisala. "; font-weight: 700; color: var(--mal); }
.quiz__estado { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--bg-2); }
.quiz__estado a { color: var(--acento-texto); font-weight: 600; }
.quiz--hecho { border-color: var(--bien); }
.guia-prog { display: grid; gap: 8px; margin-top: 28px; max-width: 640px; }
.guia-prog p { margin: 0; }
.guia-prog__barra { height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.guia-prog__barra i { display: block; height: 100%; width: 0; background: var(--acento); border-radius: inherit; transition: width 0.4s var(--ease); }
.guia-prog__nota { font-size: 0.84rem; color: var(--ink-3); }
.certificado { display: grid; gap: 10px; margin-top: 24px; padding: 22px 24px; border: 1px solid var(--bien); border-radius: var(--r); max-width: 760px; }
.certificado[hidden] { display: none; }
.certificado h2 { margin: 0; font-size: 1.5rem; }
.certificado p { margin: 0; color: var(--ink-2); }
.certificado__form { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; }
.certificado__form .medida { flex: 1 1 260px; }
.curso li.curso--aprobada .curso__n { color: var(--bien); }
.curso li.curso--aprobada .curso__min::after { content: " · aprobada"; color: var(--bien); }

/* En el celular (el iPhone sobre todo), un campo con letra de menos de 16 px agranda la página al tocarlo y el
   cursor puede quedar corrido del texto: en pantallas táctiles, los campos chicos van a 16 px */
@media (pointer: coarse) {
  .al-form input, .catalogo-pedir__fila input, .consulta__campos input, .consulta textarea, .mp-nuevo input, .mp-barra select, .mp-campo input, .mp-campo select, .mp-campo textarea, .k-buscar input, .k-fila input, .k-fila input[data-k="nombre"], .medida select, .b-pagina select { font-size: 16px; }
}

/* Ficha de perfil: la consulta, debajo del resumen */
.perfil__consulta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 22px; }
.perfil__consulta span { font-size: 0.88rem; color: var(--ink-3); }
/* Áreas táctiles de al menos 24 px en el celular: pie, migas y enlaces chicos */
@media (max-width: 640px) {
  .pie li a, .migas a, .dc__ultima a, .dc__mas { display: inline-block; padding-block: 4px; }
}

/* Portada: el comienzo (doc "HOME - ALUMINIO.AR"): el título centrado, una pastilla por sección que se desliza hasta
   la elegida, el piquito del panel que la sigue y el panel con algo real a la derecha (assets/site.js) */
.portada-heroe { display: grid; justify-items: center; gap: 14px; padding-block: clamp(28px, 5vw, 60px) 10px; text-align: center; }
.portada-heroe h1 { margin: 0; max-width: 20ch; font-size: var(--titulo-grande); line-height: 1.02; text-wrap: balance; }
.portada-heroe > p { margin: 0; max-width: 62ch; font-size: 1.08rem; color: var(--ink-2); text-wrap: balance; }
.puertas { --n: 6; --desliza: 0.5s cubic-bezier(0.65, 0, 0.35, 1); --pv-linea: color-mix(in srgb, var(--ink) 13%, var(--bg-2)); justify-self: stretch; display: grid; margin-top: 20px; text-align: left; }
.puertas__pista { border-radius: 999px; background: var(--bg-2); }
.puertas__fila { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding: 6px; }
.puertas__marca { position: absolute; top: 6px; bottom: 6px; left: calc(6px + (100% - 12px) * var(--i, 0) / var(--n)); width: calc((100% - 12px) / var(--n)); border-radius: 999px; background: var(--acento-texto); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--acento-texto) 75%, transparent); transition: left var(--desliza), top var(--desliza); }
.puerta { position: relative; z-index: 1; min-height: 46px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 600 0.95rem/1.15 var(--texto); text-align: center; cursor: pointer; transition: color 0.35s; }
.puerta:hover { color: var(--ink); }
.puerta[aria-pressed="true"] { color: var(--acento-ink); }
.puertas__caja { position: relative; margin-top: 18px; border-radius: 24px; background: var(--bg-2); touch-action: pan-y; touch-action: pan-y pinch-zoom; }
.puertas__pico { position: absolute; top: -7px; left: calc(6px + (100% - 12px) * (var(--i, 0) + 0.5) / var(--n) - 8px); width: 16px; height: 16px; border-radius: 3px; background: var(--bg-2); transform: rotate(45deg); transition: left var(--desliza); }
.puerta-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 28px 56px; min-height: 380px; padding: clamp(24px, 4vw, 48px); overflow: hidden; }
/* toda la diapositiva es un botón grande a su página: un enlace la cubre por detrás y el contenido le deja pasar los
   toques; los enlaces, botones y formularios de adentro siguen funcionando encima */
.puerta-panel__toda { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.puerta-panel:has(> .puerta-panel__toda) > :not(.puerta-panel__toda) { position: relative; z-index: 1; pointer-events: none; }
.puerta-panel:has(> .puerta-panel__toda) :is(a, button, input, select, textarea, label, form) { pointer-events: auto; }
.puerta-panel .btn > span { transition: transform 0.2s var(--ease); }
.puerta-panel:has(> .puerta-panel__toda:hover) .puerta-panel__txt > .btn { opacity: 0.86; }
.puerta-panel:has(> .puerta-panel__toda:hover) .puerta-panel__txt > .btn > span { transform: translateX(3px); }
.puerta-panel[hidden] { display: none; }
.puerta-panel--solo { grid-template-columns: minmax(0, 1fr); }
.puerta-panel__txt { display: grid; justify-items: start; gap: 12px; min-width: 0; }
.puerta-panel__vis { min-width: 0; }
.puerta-panel__que { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acento-texto); }
.portada-heroe .puerta-panel__lema { margin: 0; max-width: 22ch; font: 700 clamp(1.45rem, 1.1vw + 1.1rem, 2.1rem)/1.12 var(--titulo); letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.portada-heroe .puerta-panel__d { margin: 0; max-width: 52ch; font-size: 1.02rem; line-height: 1.6; color: var(--ink-2); }
.puerta-panel .btn { margin-top: 6px; }
.puerta-panel__marca { display: inline-flex; align-items: center; gap: 0.2em; font: 800 1.3rem/1 var(--titulo); letter-spacing: -0.04em; color: var(--ink); }
.puerta-panel__marca em { font-style: normal; color: var(--acento); }
/* el contenido nuevo entra desde el lado hacia el que te moviste */
.puerta-panel.desde-der > * { animation: puerta-der 0.55s var(--ease) both; }
.puerta-panel.desde-izq > * { animation: puerta-izq 0.55s var(--ease) both; }
.puerta-panel.desde-der > .puerta-panel__vis, .puerta-panel.desde-izq > .puerta-panel__vis { animation-delay: 0.07s; }
@keyframes puerta-der { from { opacity: 0; transform: translateX(48px); } }
@keyframes puerta-izq { from { opacity: 0; transform: translateX(-48px); } }
.puertas__pie { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px 16px; margin-top: 12px; padding-inline: 8px; }
.puertas__pie[hidden] { display: none; }
.puertas__cuenta { font-size: 0.9rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.puertas__ctrl { display: flex; align-items: center; justify-self: center; gap: 8px; }
.puertas__ctrl .puertas__cuenta { margin-left: 6px; }
.puertas__btn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.puertas__btn:hover { border-color: var(--acento-texto); color: var(--acento-texto); }
.puertas__btn[hidden] { display: none; }
.puertas__btn svg { width: 16px; height: 16px; }
.puertas__ico-play, .puertas__btn[aria-pressed="true"] .puertas__ico-pausa { display: none; }
.puertas__btn[aria-pressed="true"] .puertas__ico-play { display: block; }
/* el pase automático: una línea naranja al pie del panel marca cuánto falta para la sección siguiente */
.puertas { --pausa-auto: 6s; }
.puertas__tiempo { position: absolute; left: 24px; right: 24px; bottom: 0; height: 3px; border-radius: 3px; background: var(--acento); transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none; }
.puertas--auto .puertas__tiempo { opacity: 1; animation: puertas-tiempo var(--pausa-auto) linear forwards; }
.puertas--quieta .puertas__tiempo { animation-play-state: paused; }
@keyframes puertas-tiempo { to { transform: scaleX(1); } }
.puertas__sig { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; border: 0; background: transparent; color: var(--ink); font: 600 0.95rem/1 var(--texto); cursor: pointer; }
.puertas__sig[data-puertas-sig] { justify-self: end; }
.puertas__sig--ant { justify-self: start; }
.puertas__eti { font-weight: 500; color: var(--ink-3); }
.puertas__flecha { display: inline-block; font-size: 1.15rem; color: var(--acento); animation: puertas-titila 1.3s ease-in-out infinite; }
.puertas--usadas .puertas__flecha { animation: none; transition: transform 0.25s var(--ease); }
.puertas__sig:hover .puertas__flecha { transform: translateX(4px); }
/* la de volver es igual a la de seguir, sin titilar (una sola flecha invita), y se mueve hacia su lado */
.puertas__sig--ant .puertas__flecha { animation: none; transition: transform 0.25s var(--ease); }
.puertas__sig--ant:hover .puertas__flecha { transform: translateX(-4px); }
@keyframes puertas-titila { 50% { opacity: 0.3; transform: translateX(6px); } }
/* Lo de la derecha de cada panel */
.pv-tubo { display: grid; gap: 14px; color: var(--ink); text-decoration: none; }
.pv-tubo__dib { display: block; width: 100%; max-width: 420px; height: auto; overflow: visible; }
.pv-traza { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pv-cota { fill: none; stroke: var(--acento); stroke-width: 1.5; }
.pv-tubo text { font: 600 15px var(--texto); fill: var(--acento-texto); }
.pv-tubo__dato { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.pv-tubo__dato b { font: 700 2rem/1 var(--titulo); font-variant-numeric: tabular-nums; }
.pv-tubo__dato small { font: 500 1rem var(--texto); color: var(--ink-2); }
.pv-tubo__dato > span { font-size: 0.88rem; color: var(--ink-3); transition: color 0.2s; }
.pv-tubo:hover .pv-tubo__dato > span { color: var(--acento-texto); }
.pv-ind { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
.pv-ind a { display: grid; align-content: start; gap: 6px; padding-top: 14px; border-top: 1px solid var(--pv-linea); color: var(--ink); text-decoration: none; }
.pv-ind span { font-size: 0.86rem; color: var(--ink-2); }
.pv-ind b { font: 700 clamp(1.45rem, 1vw + 1rem, 1.9rem)/1.05 var(--titulo); font-variant-numeric: tabular-nums; transition: color 0.2s; }
.pv-ind small { font-size: 0.78rem; line-height: 1.35; color: var(--ink-3); }
.pv-ind a:hover b { color: var(--acento-texto); }
.pv-bib { display: grid; gap: 12px; }
.pv-bib__cab { font-size: 0.84rem; color: var(--ink-3); }
.pv-bib ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pv-linea); }
.pv-bib a { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--pv-linea); color: var(--ink); text-decoration: none; }
.pv-bib a span { font: 600 0.82rem var(--texto); color: var(--acento-texto); }
.pv-bib a b { font: 600 1.06rem/1.3 var(--titulo); transition: color 0.2s; }
.pv-bib a:hover b { color: var(--acento-texto); }
.pv-nota { display: grid; justify-items: start; gap: 10px; color: var(--ink); text-decoration: none; }
.pv-nota .media { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; }
.pv-nota b { font: 700 1.25rem/1.25 var(--titulo); text-wrap: pretty; }
.pv-nota small { font-size: 0.82rem; color: var(--ink-3); }
.pv-nota:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--acento); text-underline-offset: 4px; }
.pv-nota:hover .media img { transform: scale(1.03); }
.pv-dc { display: grid; gap: 12px; }
.pv-dc__t { font-size: 0.92rem; font-weight: 600; color: var(--ink-2); }
.pv-dc form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; }
.pv-dc .btn { white-space: nowrap; }
.pv-dc .error { grid-column: 1 / -1; margin: 0; font-size: 0.82rem; }
.pv-dc .error:empty { display: none; }
.pv-dc .aviso-datos { grid-column: 1 / -1; margin: 0 0 0 16px; font-size: 0.76rem; color: var(--ink-3); }
.pv-dc .aviso-datos a { color: inherit; }
.pv-dc .estado-form { margin: 0; }
/* Doble Click en el comienzo: su recuadro negro de siempre (caja y piquito), en los dos temas */
.puertas__caja { transition: background-color 0.35s; }
.puertas__pico { transition: left var(--desliza), background-color 0.35s; }
.puertas__caja:has(#puerta-doble-click:not([hidden])) { background: var(--dc-fondo); box-shadow: inset 0 0 0 1px var(--dc-borde); }
.puertas__caja:has(#puerta-doble-click:not([hidden])) .puertas__pico { background: var(--dc-fondo); }
#puerta-doble-click { position: relative; border-radius: 24px; color: #ffffff; }
#puerta-doble-click::after { content: ''; position: absolute; right: -90px; bottom: -90px; width: 280px; height: 280px; border-radius: 50%; border: 2px solid rgba(255, 122, 69, 0.5); box-shadow: 0 0 0 32px rgba(255, 122, 69, 0.07), 0 0 0 64px rgba(255, 122, 69, 0.04); pointer-events: none; }
#puerta-doble-click > :not(.puerta-panel__toda) { position: relative; z-index: 1; }
#puerta-doble-click .puerta-panel__marca { color: #ffffff; }
#puerta-doble-click .puerta-panel__marca em, #puerta-doble-click .dc__cursor { color: #ff7a45; fill: #ff7a45; }
.portada-heroe #puerta-doble-click .puerta-panel__lema { color: #ffffff; }
.portada-heroe #puerta-doble-click .puerta-panel__d { color: #d9d5cf; }
#puerta-doble-click .pv-dc__t { color: #eceae6; }
#puerta-doble-click input { background: #1c1c1c; border-color: #343434; color: #ffffff; }
#puerta-doble-click input::placeholder { color: #8d8a85; }
#puerta-doble-click .aviso-datos { color: #8d8a85; }
#puerta-doble-click .error { color: #ff8a80; }
#puerta-doble-click .estado-form { color: #ffffff; }
.pv-busca { display: grid; gap: 18px; }
.pv-busca__form { display: flex; gap: 8px; }
.pv-busca__campo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding-left: 18px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.pv-busca__campo:focus-within { box-shadow: inset 0 0 0 2px var(--acento); }
.pv-busca__campo .lupa { flex: none; width: 20px; height: 20px; color: var(--acento-texto); }
.pv-busca__campo input { flex: 1; min-width: 0; padding: 14px 16px 14px 0; border: 0; border-radius: 0; background: transparent; }
.pv-busca__campo input:focus-visible { outline: none; }
.pv-busca__fam { margin: 0; font-size: 0.95rem; line-height: 2; color: var(--ink-2); }
.pv-busca__fam a { margin-right: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.pv-busca__fam a:hover { color: var(--acento-texto); }
.pv-busca__fam small { font-weight: 500; color: var(--ink-3); }
/* el dibujo se traza y los datos suben de a uno cada vez que se abre su panel */
.puerta-panel:not([hidden]) .pv-traza { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pv-trazar 1.1s 0.2s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.puerta-panel:not([hidden]) .pv-cota { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pv-trazar 0.8s 1s ease forwards; }
.puerta-panel:not([hidden]) .pv-tubo text { animation: pv-aparece 0.5s 1.5s both; }
.puerta-panel:not([hidden]) :is(.pv-ind a, .pv-bib li) { animation: pv-sube 0.5s var(--ease) both; }
.puerta-panel:not([hidden]) :is(.pv-ind a, .pv-bib li):nth-child(2) { animation-delay: 0.08s; }
.puerta-panel:not([hidden]) :is(.pv-ind a, .pv-bib li):nth-child(3) { animation-delay: 0.16s; }
.puerta-panel:not([hidden]) :is(.pv-ind a, .pv-bib li):nth-child(4) { animation-delay: 0.24s; }
@keyframes pv-trazar { to { stroke-dashoffset: 0; } }
@keyframes pv-aparece { from { opacity: 0; } }
@keyframes pv-sube { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  .puertas__marca, .puertas__pico { transition: none; }
  .puerta-panel.desde-der > *, .puerta-panel.desde-izq > *, .puertas__flecha, .puerta-panel:not([hidden]) :is(.pv-traza, .pv-cota, .pv-tubo text, .pv-ind a, .pv-bib li) { animation: none; stroke-dashoffset: 0; }
}
@media (max-width: 860px) { .puerta-panel { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 26px; } }
/* en el celular, las seis pastillas van en dos filas de tres y la naranja se mueve en las dos direcciones */
@media (max-width: 760px) {
  .puertas__pista { border-radius: 24px; }
  .puertas__fila { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 52px; }
  .puertas__marca { left: calc(6px + (100% - 12px) * var(--col, 0) / 3); top: calc(6px + var(--fil, 0) * 52px); bottom: auto; height: 52px; width: calc((100% - 12px) / 3); border-radius: 18px; }
  .puerta { min-height: 52px; padding: 0 6px; border-radius: 18px; font-size: 0.86rem; }
  .puertas__pico { display: none; }
  .puertas__caja { margin-top: 12px; overflow: hidden; }
  .puertas__eti { display: none; }
  .puertas__pie { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "ant sig" "ctrl ctrl"; }
  .puertas__sig--ant { grid-area: ant; }
  .puertas__sig[data-puertas-sig] { grid-area: sig; }
  .puertas__ctrl { grid-area: ctrl; }
}

/* Portada: "Conocé toda la línea de perfiles" */
.linea-perfiles { position: relative; overflow: hidden; display: grid; gap: 22px; padding: clamp(22px, 3.6vw, 40px); border: 1px solid var(--line); border-radius: 22px; background: var(--bg-2); }
.linea-perfiles::after { content: ''; position: absolute; right: -130px; top: -140px; width: 300px; height: 300px; border-radius: 50%; border: 2px solid rgba(255, 122, 69, 0.3); box-shadow: 0 0 0 34px rgba(255, 122, 69, 0.045), 0 0 0 68px rgba(255, 122, 69, 0.025); pointer-events: none; }
.linea-perfiles > * { position: relative; z-index: 1; }
.linea-perfiles__cab { display: grid; justify-items: start; gap: 8px; }
.linea-perfiles__eti { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acento-texto); }
.linea-perfiles h2 { margin: 0; font-size: var(--titulo-grande); line-height: 1.04; text-wrap: balance; }
.linea-perfiles h2 em { font-style: normal; color: var(--acento-texto); }
.linea-perfiles__cab p { margin: 0; max-width: 62ch; color: var(--ink-2); }
.lineas-dest { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.lineas-dest a { display: grid; align-content: start; gap: 12px; height: 100%; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--ink); transition: border-color 0.2s; }
.lineas-dest a:hover { border-color: var(--acento-texto); }
.lineas-dest__ico { width: 40px; height: 40px; fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; transition: stroke 0.2s; }
.lineas-dest a:hover .lineas-dest__ico { stroke: var(--acento-texto); }
.lineas-dest a > span { display: grid; gap: 4px; }
.lineas-dest b { font-weight: 600; }
.lineas-dest small { font-size: 0.85rem; line-height: 1.4; color: var(--ink-3); }
.linea-perfiles__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.linea-perfiles__pie > span { font-size: 0.9rem; color: var(--ink-3); }
@media (max-width: 1000px) { .lineas-dest { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .puerta-panel { padding: 22px 20px; }
  .pv-dc form { grid-template-columns: minmax(0, 1fr); }
  .pv-dc .aviso-datos { margin-left: 0; }
  .pv-ind { gap: 18px 16px; }
  .lineas-dest { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lineas-dest a { grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 14px; }
  .lineas-dest__ico { width: 34px; height: 34px; }
}

/* ═══ Element 13: la comunidad de referentes (/element13/). Diseño propio, para que no se confunda con Doble Click:
   sin recuadros, a todo el ancho, capítulos numerados con hilos finos y la credencial como una tarjeta de metal
   (negra en los dos temas). Sigue el tema del sitio: en claro va toda en blanco, en oscuro toda en negro. Los colores
   y las letras son los del sitio. La marca y el átomo (2-8-3) están en img/element13/ ═══ */
.e13-zona {
  --bg: #ffffff; --bg-2: #f4f3f0; --ink: #111111; --ink-2: #4a4945; --ink-3: #6f6d68; --line: #e4e1dc;
  --acento: #ef5a24; --acento-texto: #c2451a; --acento-ink: #ffffff;
  --e13-caja: #f7f6f3; --e13-borde: #d9d5cf; --e13-borde-fuerte: #b9b5ae; --e13-naranja: #ef5a24; --e13-naranja-texto: #c2451a;
  --e13-gris: #6f6d68; --e13-texto: #4a4945; --e13-fuerte: #111111; --e13-campo: #ffffff; --e13-error: #c81e1e;
  --e13-boton-hover: #111111; --e13-boton-hover-texto: #ffffff; --e13-brillo: rgba(239, 90, 36, 0.07); --e13-sombra: rgba(0, 0, 0, 0.32);
  color-scheme: light; background: var(--bg); color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .e13-zona {
  --bg: #0b0b0c; --bg-2: #161617; --ink: #f2f2f0; --ink-2: #b9b8b3; --ink-3: #7d7c77; --line: #232325;
  --acento: #ff7a45; --acento-texto: #ff7a45; --acento-ink: #0b0b0c;
  --e13-caja: #111112; --e13-borde: #2c2c2f; --e13-borde-fuerte: #3a3a3d; --e13-naranja: #ff7a45; --e13-naranja-texto: #ff7a45;
  --e13-gris: #a9a9a4; --e13-texto: #d9d5cf; --e13-fuerte: #ffffff; --e13-campo: #121213; --e13-error: #ff8a80;
  --e13-boton-hover: #ffffff; --e13-boton-hover-texto: #0b0b0c; --e13-brillo: rgba(255, 122, 69, 0.13); --e13-sombra: rgba(0, 0, 0, 0.9);
  color-scheme: dark;
  }
}
:root[data-theme="dark"] .e13-zona {
  --bg: #0b0b0c; --bg-2: #161617; --ink: #f2f2f0; --ink-2: #b9b8b3; --ink-3: #7d7c77; --line: #232325;
  --acento: #ff7a45; --acento-texto: #ff7a45; --acento-ink: #0b0b0c;
  --e13-caja: #111112; --e13-borde: #2c2c2f; --e13-borde-fuerte: #3a3a3d; --e13-naranja: #ff7a45; --e13-naranja-texto: #ff7a45;
  --e13-gris: #a9a9a4; --e13-texto: #d9d5cf; --e13-fuerte: #ffffff; --e13-campo: #121213; --e13-error: #ff8a80;
  --e13-boton-hover: #ffffff; --e13-boton-hover-texto: #0b0b0c; --e13-brillo: rgba(255, 122, 69, 0.13); --e13-sombra: rgba(0, 0, 0, 0.9);
  color-scheme: dark;
}
.e13-zona h2 { font-size: var(--titulo-grande); line-height: 1.04; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.e13-zona h3, .e13-zona p { margin: 0; }
.e13-eti { display: inline-flex; flex-wrap: wrap; gap: 12px; align-items: baseline; font: 600 0.74rem/1.2 var(--texto); text-transform: uppercase; letter-spacing: 0.18em; color: var(--e13-gris); }
.e13-eti b { color: var(--e13-naranja-texto); font-weight: 700; font-variant-numeric: tabular-nums; }
.e13-enlace { color: var(--ink); font-weight: 600; padding: 6px 0; border-bottom: 1px solid var(--ink-3); }
.e13-enlace:hover { color: var(--e13-naranja-texto); border-color: var(--e13-naranja-texto); }
.e13-nota { font-size: 0.84rem; color: var(--ink-3); }
/* el botón de Element 13: recto y en mayúsculas espaciadas, no la píldora del resto del sitio */
.e13-btn { display: inline-flex; align-items: center; gap: 12px; padding: 18px 28px; border-radius: 2px; background: var(--e13-naranja); color: #0b0b0c; font: 700 0.8rem/1 var(--texto); text-transform: uppercase; letter-spacing: 0.14em; transition: background-color 0.2s ease; }
.e13-btn:hover { background: var(--e13-boton-hover); color: var(--e13-boton-hover-texto); }
.e13-btn span { transition: transform 0.2s ease; }
.e13-btn:hover span { transform: translateX(3px); }

/* la apertura: a todo el ancho, centrada, con el átomo arriba y el aluminio en la tabla periódica como dato */
.e13-heroe { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(60% 55% at 50% 28%, var(--e13-brillo), transparent 70%), var(--bg); }
.e13-heroe__barra { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-block: 18px; border-bottom: 1px solid var(--line); font: 600 0.72rem/1.3 var(--texto); text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-3); }
.e13-heroe__datos { font-variant-numeric: tabular-nums; color: var(--e13-gris); }
.e13-heroe__centro { display: grid; justify-items: center; text-align: center; gap: 22px; padding-block: clamp(36px, 5vw, 64px) clamp(56px, 8vw, 104px); }
.e13-heroe__atomo { width: min(62vw, 290px); }
.e13-heroe__atomo img { display: block; width: 100%; height: auto; }
.e13-heroe__nombre { margin: 0; font: 800 clamp(3.2rem, 7vw + 0.5rem, 7.4rem)/0.9 var(--titulo); letter-spacing: -0.04em; color: var(--e13-fuerte); }
.e13-heroe__nombre span { color: var(--e13-naranja); }
.e13-heroe__frase { font: 700 clamp(1.35rem, 1.4vw + 1rem, 2.1rem)/1.15 var(--titulo); letter-spacing: -0.025em; color: var(--e13-fuerte); max-width: 30ch; text-wrap: balance; }
.e13-heroe__frase em { font-style: normal; color: var(--e13-naranja); }
.e13-heroe__bajada { font-size: 1.05rem; line-height: 1.6; color: var(--ink-2); max-width: 56ch; text-wrap: pretty; }
.e13-heroe .e13-nota { max-width: 52ch; text-wrap: balance; }
.e13-heroe__acc { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; margin-top: 6px; }

/* capítulos: la cabecera a la izquierda (queda fija mientras se lee) y el contenido a la derecha, separados por hilos */
.e13-cap { border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }
.e13-cap__grilla { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(32px, 5vw, 80px); padding-block: clamp(56px, 8vw, 112px); }
.e13-cap__cab { position: sticky; top: 32px; align-self: start; display: grid; gap: 16px; justify-items: start; }
.e13-cap__d { color: var(--ink-2); font-size: 1.02rem; line-height: 1.6; max-width: 42ch; }
.e13-cap__cuerpo { min-width: 0; display: grid; gap: clamp(40px, 5vw, 64px); align-content: start; }

/* 01 · los beneficios, en renglones */
.e13-benef { display: grid; }
.e13-benef__grupo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px 32px; padding-block: 28px; border-top: 1px solid var(--line); }
.e13-benef__grupo:first-child { padding-top: 0; border-top: 0; }
.e13-benef__grupo h3 { font: 700 1.3rem/1.2 var(--titulo); letter-spacing: -0.01em; }
.e13-benef__grupo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.e13-benef__grupo li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: start; font-size: 0.98rem; line-height: 1.6; color: var(--ink-2); }
.e13-benef__grupo li p { margin: 0; }
.e13-benef__grupo li b { color: var(--ink); font-weight: 600; }
/* el ícono, en una casilla chica como la del 13 */
.e13-benef__icono { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--e13-borde); border-radius: 4px; background: var(--e13-caja); color: var(--e13-naranja-texto); }
.e13-benef__icono svg { width: 26px; height: 26px; }
.e13-benef__icono text { font-family: var(--texto); }
.e13-ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 40px; align-items: center; padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }
.e13-ficha__txt { display: grid; gap: 10px; }
.e13-ficha__txt b { font: 700 1.2rem/1.2 var(--titulo); }
.e13-ficha__txt p { color: var(--ink-2); line-height: 1.6; }
.e13-ficha code { font: 500 0.86em/1.4 ui-monospace, Consolas, monospace; background: var(--bg-2); padding: 2px 6px; border-radius: 4px; overflow-wrap: anywhere; }
/* la credencial: una tarjeta de aluminio negro, cepillado, con un brillo que pasa al apoyar el mouse */
.e13-tarjeta { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; width: 100%; max-width: 420px; aspect-ratio: 1.586; padding: clamp(18px, 2.4vw, 26px); border-radius: 18px; color: #ffffff; background: linear-gradient(145deg, #2c2c2e 0%, #18181a 38%, #0d0d0e 70%, #1d1d1f 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 70px -30px var(--e13-sombra), 0 0 90px -24px rgba(255, 122, 69, 0.22); }
.e13-tarjeta::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 3px); pointer-events: none; }
.e13-tarjeta::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.09) 50%, transparent 58%); transform: translateX(-34%); transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); pointer-events: none; }
.e13-tarjeta:hover::after { transform: translateX(34%); }
.e13-tarjeta > * { position: relative; z-index: 1; }
.e13-tarjeta__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.e13-tarjeta__marca { display: grid; justify-items: end; gap: 6px; font: 800 1.1rem/1 var(--titulo); letter-spacing: -0.03em; }
.e13-tarjeta__marca b { color: #ff7a45; }
.e13-tarjeta__marca small { font: 500 0.64rem/1 var(--texto); letter-spacing: 0.06em; color: #85857f; }
.e13-tarjeta .e13-casilla { width: 50px; font-size: 1.15rem; border-radius: 8px; border-width: 1.5px; background: rgba(0, 0, 0, 0.35); }
.e13-tarjeta .e13-casilla small { font-size: 0.5rem; }
.e13-tarjeta .e13-casilla em { font-size: 0.32rem; }
.e13-tarjeta__pie { display: grid; gap: 4px; }
.e13-tarjeta__eti { font: 600 0.62rem/1 var(--texto); letter-spacing: 0.22em; text-transform: uppercase; color: #ff7a45; margin-bottom: 4px; }
.e13-tarjeta__pie b { font: 700 clamp(1.05rem, 0.9vw + 0.75rem, 1.3rem)/1.15 var(--titulo); letter-spacing: -0.01em; }
.e13-tarjeta__pie span:last-child { font-size: 0.82rem; color: #a9a9a4; }
/* la credencial de cada miembro es un enlace: lleva a su página de enlaces */
a.e13-tarjeta, a.e13-tarjeta:hover { color: #ffffff; text-decoration: none; }
a.e13-tarjeta { transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
a.e13-tarjeta:hover { transform: translateY(-3px); }
a.e13-tarjeta:focus-visible { outline: 2px solid #ff7a45; outline-offset: 4px; }
a.e13-tarjeta .e13-tarjeta__pie { padding-right: 48px; }
.e13-tarjeta > .e13-tarjeta__ir { position: absolute; right: clamp(18px, 2.4vw, 26px); bottom: clamp(18px, 2.4vw, 26px); display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; font-size: 1rem; transition: background 0.2s, border-color 0.2s, transform 0.2s; }
a.e13-tarjeta:hover .e13-tarjeta__ir { background: #ff7a45; border-color: #ff7a45; transform: translateX(2px); }
.e13-ficha__txt .e13-enlace { justify-self: start; margin-top: 4px; }
.e13-casilla { position: relative; display: grid; place-items: center; width: 72px; aspect-ratio: 1 / 1.08; border: 2px solid #ff7a45; border-radius: 10px; background: #161616; color: #ffffff; font: 800 1.6rem/1 var(--titulo); }
.e13-casilla small { position: absolute; top: 8%; left: 10%; font: 600 0.6rem/1 var(--texto); color: #ff7a45; }
.e13-casilla em { position: absolute; bottom: 8%; font: 500 0.45rem/1 var(--texto); font-style: normal; letter-spacing: 0.12em; color: #a9a9a4; }

/* 02 · el filtro: «Sí» y «No» grandes, separados por un hilo */
.e13-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.e13-si, .e13-no { display: grid; gap: 22px; align-content: start; }
.e13-si { padding-right: clamp(20px, 3vw, 40px); }
.e13-no { padding-left: clamp(20px, 3vw, 40px); border-left: 1px solid var(--line); }
.e13-si h3, .e13-no h3 { font: 800 clamp(3rem, 3.5vw + 1.2rem, 4.6rem)/0.9 var(--titulo); letter-spacing: -0.04em; color: var(--e13-fuerte); }
.e13-no h3 { color: var(--ink-3); }
@supports (-webkit-text-stroke: 1px) { .e13-no h3 { color: transparent; -webkit-text-stroke: 1.5px var(--ink-3); } }
.e13-si ul, .e13-no ul { list-style: none; margin: 0; padding: 0; display: grid; }
.e13-si li, .e13-no li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; padding-block: 14px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 0.97rem; line-height: 1.55; }
.e13-si li::before { content: "+"; color: var(--e13-naranja-texto); font-weight: 700; }
.e13-no li::before { content: "−"; color: var(--ink-3); font-weight: 700; }
.e13-si li b, .e13-no li b { color: var(--ink); font-weight: 600; }

/* 03 · los pasos, con el número grande y calado */
.e13-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: paso; }
.e13-pasos li { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line); }
.e13-pasos li::before { counter-increment: paso; content: counter(paso, decimal-leading-zero); margin-bottom: 8px; font: 800 clamp(2.8rem, 2.5vw + 1.4rem, 4rem)/1 var(--titulo); letter-spacing: -0.04em; color: var(--e13-naranja); font-variant-numeric: tabular-nums; }
@supports (-webkit-text-stroke: 1px) { .e13-pasos li::before { color: transparent; -webkit-text-stroke: 1.5px var(--e13-naranja); } }
.e13-pasos b { font: 700 1.1rem/1.25 var(--titulo); }
.e13-pasos span { font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); }

/* 04 · las preguntas */
.e13-faq { display: grid; border-top: 1px solid var(--line); }
.e13-faq details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.e13-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font: 700 1.08rem/1.35 var(--titulo); }
.e13-faq summary::-webkit-details-marker { display: none; }
.e13-faq summary::after { content: "+"; flex: none; color: var(--e13-naranja-texto); font: 400 1.5rem/1 var(--texto); transition: transform 0.2s ease; }
.e13-faq details[open] summary::after { transform: rotate(45deg); }
.e13-faq p { margin-top: 12px; color: var(--ink-2); line-height: 1.6; max-width: 64ch; }

/* el cierre: centrado, dentro de las órbitas del átomo */
.e13-final { position: relative; overflow: hidden; text-align: center; background: radial-gradient(50% 60% at 50% 100%, var(--e13-brillo), transparent 70%), var(--bg); }
.e13-final__atomo { position: absolute; left: 50%; top: 50%; width: min(190vw, 920px); transform: translate(-50%, -50%); opacity: 0.55; pointer-events: none; }
.e13-final__atomo img { display: block; width: 100%; height: auto; }
.e13-final__txt { position: relative; display: grid; justify-items: center; gap: 20px; padding-block: clamp(72px, 10vw, 140px); }
.e13-final__txt h2 { max-width: 20ch; }
.e13-final__txt p { color: var(--ink-2); }
/* «¿Ya sos miembro? Entrá a tu panel»: la entrada al panel comunidad, discreta, debajo de «Postulate» */
.e13-acceso { margin: 2px 0 0; font-size: 0.92rem; color: var(--ink-3); }
.e13-acceso a { color: var(--e13-naranja-texto); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.e13-acceso a:hover { color: var(--e13-fuerte); }
/* ═══ Element 13 · la postulación (/element13/postulate/): una página en tres partes, en el mismo oscuro y con los
   mismos capítulos que la página de Element 13. Los campos son rectos, no la píldora del resto del sitio ═══ */
.e13p { border-bottom: 0; }
.e13p h1 { margin: 0; font-size: var(--titulo-grande); line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }
.e13p-migas { display: flex; gap: 10px; font-size: 0.86rem; color: var(--ink-3); }
.e13p-migas a { color: var(--ink-2); }
.e13p-migas a:hover { color: var(--e13-naranja-texto); }
.e13p-indice { list-style: none; width: 100%; margin: 8px 0 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.e13p-indice li { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--ink-3); transition: color 0.2s ease; }
.e13p-indice b { font: 700 0.74rem/1 var(--texto); letter-spacing: 0.14em; font-variant-numeric: tabular-nums; }
.e13p-indice li.es-actual { color: var(--ink); }
.e13p-indice li.es-actual b, .e13p-indice li.esta-lista b { color: var(--e13-naranja-texto); }
.e13p-indice li.esta-lista::after { content: "✓"; margin-left: auto; color: var(--e13-naranja-texto); }
.e13p-guardado { max-width: 36ch; font-size: 0.82rem; color: var(--ink-3); }
.e13p-form { display: grid; gap: clamp(40px, 5vw, 56px); }
.e13p-form[hidden], .e13p-listo[hidden] { display: none; }
.e13p-parte { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 14px; }
.e13p-parte legend { padding: 0; margin-bottom: 4px; }
.e13p-parte__d { max-width: 60ch; color: var(--ink-2); line-height: 1.6; }
.e13p-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; margin-top: 6px; }
.e13p-campo { display: grid; gap: 7px; align-content: start; min-width: 0; }
.e13p-campo--ancho { grid-column: 1 / -1; }
.e13p-campo > label, .e13p-label { font: 600 0.92rem/1.3 var(--texto); color: var(--ink); }
.e13p-opc { font-weight: 400; color: var(--ink-3); }
.e13p input:not([type=checkbox]):not([type=file]), .e13p textarea { padding: 13px 14px; border-radius: 3px; border-color: var(--e13-borde); background: var(--e13-campo); color: var(--ink); }
.e13p input:not([type=checkbox]):not([type=file]):focus, .e13p textarea:focus { border-color: var(--e13-naranja); }
.e13p textarea { min-height: 132px; line-height: 1.55; }
.e13p-ayuda { font-size: 0.8rem; color: var(--ink-3); }
.e13p-cuenta { justify-self: end; font-size: 0.78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.e13p-cuenta.esta-ok { color: var(--ink-2); }
.e13p-error { font-size: 0.82rem; color: var(--e13-error); }
.e13p-error:empty { display: none; }
.e13p-campo.tiene-error input:not([type=file]), .e13p-campo.tiene-error textarea, .e13p-campo.tiene-error .e13p-subir { border-color: var(--e13-error); }
.e13p-subir { position: relative; display: grid; justify-items: center; gap: 4px; padding: 26px 18px; border: 1.5px dashed var(--e13-borde-fuerte); border-radius: 4px; background: var(--e13-caja); text-align: center; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; }
.e13p-subir:hover, .e13p-subir.encima { border-color: var(--e13-naranja); background: var(--bg-2); }
.e13p-subir:focus-within { outline: 2px solid var(--acento); outline-offset: 2px; }
.e13p-subir input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.e13p-subir b { font: 700 1rem/1.3 var(--titulo); color: var(--ink); }
.e13p-subir span { max-width: 46ch; font-size: 0.82rem; color: var(--ink-3); }
.e13p-fotos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.e13p-fotos:empty { display: none; }
.e13p-fotos li { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: var(--e13-caja); }
.e13p-fotos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.e13p-fotos button { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.72); color: #ffffff; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.e13p-cierre { display: grid; justify-items: start; gap: 14px; padding-top: 28px; border-top: 1px solid var(--line); }
.e13p-check { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 4px 12px; font-size: 0.94rem; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.e13p-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--e13-naranja); }
.e13p-check a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.e13p-check .e13p-error { grid-column: 2; }
.e13p-cierre .e13-btn { margin-top: 8px; border: 0; cursor: pointer; }
.e13p-cierre .e13-btn[disabled] { opacity: 0.6; cursor: progress; }
.e13p-estado { font-size: 0.9rem; color: var(--ink-2); }
.e13p-estado:empty { display: none; }
.e13p-estado.es-error { color: var(--e13-error); }
.e13p-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.e13p-listo { display: grid; justify-items: start; gap: 16px; padding: clamp(28px, 4vw, 44px); border: 1px solid var(--line); border-left: 2px solid var(--e13-naranja); background: var(--e13-caja); outline: none; scroll-margin-top: 140px; }
.e13p-listo p { max-width: 60ch; color: var(--ink-2); line-height: 1.6; }
.e13p-listo .e13p-demo { font-size: 0.84rem; color: var(--ink-3); }
@media (max-width: 640px) {
  .e13p-grilla { grid-template-columns: minmax(0, 1fr); }
  .e13p-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* en la portada: la pastilla de Element 13 abre un panel negro, como el de Doble Click */
.puertas__caja:has(#puerta-element13:not([hidden])) { background: #111111; box-shadow: inset 0 0 0 1px var(--dc-borde); }
.puertas__caja:has(#puerta-element13:not([hidden])) .puertas__pico { background: #111111; }
#puerta-element13 { position: relative; border-radius: 24px; color: #ffffff; }
.portada-heroe #puerta-element13 .puerta-panel__lema { color: #ffffff; }
.portada-heroe #puerta-element13 .puerta-panel__d { color: #d9d5cf; }
#puerta-element13 .btn { background: #ff7a45; color: #111111; }
.puerta-panel__marca--e13 { display: block; width: min(100%, 340px); line-height: 0; }
.puerta-panel__marca--e13 img { width: 100%; height: auto; }
.pv-e13 { display: block; width: min(100%, 300px); justify-self: center; }
.pv-e13__atomo { width: 100%; height: auto; }
/* ═══ Element 13 · miembros: la ficha (/element13/nombre-apellido/), la página de enlaces (…/links/) y el directorio
   (/element13/miembros/). Sin foto, cada miembro es un «elemento»: sus iniciales en una casilla de la tabla periódica ═══ */
.e13m-elem { container-type: inline-size; position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border: 1.5px solid var(--e13-naranja); border-radius: 6px; background: radial-gradient(80% 80% at 28% 18%, var(--e13-brillo), transparent 70%), var(--e13-caja); color: var(--e13-fuerte); }
.e13m-elem small { position: absolute; top: 8cqw; left: 9cqw; font: 600 7.5cqw/1 var(--texto); letter-spacing: 0.04em; color: var(--e13-naranja-texto); }
.e13m-elem b { font: 800 40cqw/1 var(--titulo); letter-spacing: -0.04em; }
.e13m-elem em { position: absolute; left: 0; right: 0; bottom: 9cqw; font: 600 6.5cqw/1 var(--texto); font-style: normal; letter-spacing: 0.16em; text-transform: uppercase; text-align: center; color: var(--e13-gris); }
.e13m-foto { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
/* la casilla (o la foto) del encabezado de la ficha también lleva a la página de enlaces */
a.e13m-retrato { position: relative; display: block; color: inherit; text-decoration: none; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
a.e13m-retrato:hover { transform: translateY(-3px); }
a.e13m-retrato:focus-visible { outline: 2px solid var(--e13-naranja); outline-offset: 4px; border-radius: 6px; }
.e13m-retrato__ir { position: absolute; top: 9%; right: 9%; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--e13-borde); border-radius: 50%; font-size: 0.95rem; color: var(--e13-naranja-texto); transition: background 0.2s, border-color 0.2s, color 0.2s; }
a.e13m-retrato:hover .e13m-retrato__ir { background: var(--e13-naranja); border-color: var(--e13-naranja); color: #ffffff; }
.e13m-cab { padding-block: clamp(24px, 4vw, 40px) clamp(48px, 7vw, 88px); border-bottom: 1px solid var(--line); background: radial-gradient(55% 60% at 18% 45%, var(--e13-brillo), transparent 70%), var(--bg); }
.e13m-cab__grilla { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: clamp(24px, 4vw, 48px); }
.e13m-datos { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.e13m-nombre { font: 800 var(--titulo-grande)/1.02 var(--titulo); letter-spacing: -0.03em; color: var(--e13-fuerte); text-wrap: balance; }
.e13m-esp { margin: 0; max-width: 46ch; font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.25rem); line-height: 1.45; color: var(--ink); }
.e13m-org { margin: 0; font-size: 0.98rem; color: var(--ink-2); }
.e13m-org a { color: inherit; text-decoration: underline; text-decoration-color: var(--e13-borde-fuerte); text-underline-offset: 3px; }
.e13m-org a:hover { color: var(--e13-naranja-texto); text-decoration-color: currentColor; }
.e13m-redes { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.e13m-redes a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--e13-borde); border-radius: 3px; background: var(--e13-caja); color: var(--ink); font: 600 0.88rem/1 var(--texto); text-decoration: none; transition: border-color 0.15s, color 0.15s; }
.e13m-redes a:hover { border-color: var(--e13-naranja); color: var(--e13-naranja-texto); }
.e13m-redes svg, .e13l__lista svg { flex: none; width: 18px; height: 18px; color: var(--e13-naranja-texto); }
.e13m-frase { margin: 0; padding-left: clamp(16px, 2vw, 24px); border-left: 2px solid var(--e13-naranja); }
.e13m-frase p { margin: 0; max-width: 34ch; font: 600 clamp(1.3rem, 1.1vw + 1rem, 1.75rem)/1.35 var(--titulo); letter-spacing: -0.01em; color: var(--e13-fuerte); text-wrap: balance; }
.e13m-bio { display: grid; gap: 14px; max-width: 64ch; font-size: 1.02rem; line-height: 1.7; color: var(--ink-2); }
.e13m-bio p { margin: 0; }
.e13m-bio b { color: var(--ink); font-weight: 600; }
.e13m-obra { display: grid; gap: 20px; scroll-margin-top: 90px; }
.e13m-obra + .e13m-obra { padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }
.e13m-obra__cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.e13m-obra h3 { font: 700 clamp(1.35rem, 0.8vw + 1.1rem, 1.7rem)/1.15 var(--titulo); letter-spacing: -0.015em; color: var(--e13-fuerte); }
.e13m-obra__cab span { font: 600 0.74rem/1.2 var(--texto); letter-spacing: 0.18em; text-transform: uppercase; color: var(--e13-gris); }
.e13m-obra__d { margin: 0; max-width: 64ch; line-height: 1.7; color: var(--ink-2); }
.e13m-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 28px; margin: 0; }
.e13m-cifras div { display: grid; gap: 4px; padding-block: 14px; border-top: 1px solid var(--line); }
.e13m-cifras dt { font: 600 0.72rem/1.2 var(--texto); letter-spacing: 0.16em; text-transform: uppercase; color: var(--e13-naranja-texto); }
.e13m-cifras dd { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--ink); }
.e13m-galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 16vw, 230px); gap: 8px; }
.e13m-galeria figure { position: relative; margin: 0; overflow: hidden; border-radius: 4px; background: var(--e13-caja); }
.e13m-galeria figure:first-child { grid-row: span 2; }
.e13m-galeria img { display: block; width: 100%; height: 100%; object-fit: cover; }
.e13m-galeria figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 12px 10px; font-size: 0.78rem; line-height: 1.35; color: #ffffff; background: linear-gradient(transparent, rgba(0, 0, 0, 0.72)); }
.e13m-obra--suelta { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 36px); }
.e13m-obra--suelta img { display: block; width: 100%; height: auto; border-radius: 4px; }
.e13m-obra__txt { display: grid; gap: 14px; justify-items: start; }
.e13m-textos { list-style: none; margin: 0; padding: 0; display: grid; }
.e13m-textos a { display: grid; gap: 8px; padding-block: 20px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.e13m-textos li:last-child a { border-bottom: 1px solid var(--line); }
.e13m-textos small { font: 600 0.72rem/1.2 var(--texto); letter-spacing: 0.16em; text-transform: uppercase; color: var(--e13-naranja-texto); }
.e13m-textos b { font: 700 clamp(1.2rem, 0.6vw + 1rem, 1.45rem)/1.25 var(--titulo); color: var(--e13-fuerte); text-wrap: balance; }
.e13m-textos a:hover b { color: var(--e13-naranja-texto); }
.e13m-textos span { font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); }
.e13m-vacio { margin: 0; color: var(--ink-3); }
.e13l { min-height: 100vh; min-height: 100dvh; padding: clamp(28px, 7vh, 64px) 16px 40px; background: radial-gradient(70% 40% at 50% 0%, var(--e13-brillo), transparent 70%), var(--bg); }
.e13l__col { display: grid; justify-items: center; gap: 12px; width: 100%; max-width: 460px; margin-inline: auto; text-align: center; }
.e13l__marca { margin-bottom: 12px; font: 800 1.05rem/1 var(--titulo); letter-spacing: -0.01em; color: var(--e13-fuerte); text-decoration: none; }
.e13l__marca b { color: var(--e13-naranja-texto); }
.e13l__retrato { width: 128px; }
.e13l__nombre { margin-top: 8px; font: 800 var(--titulo-grande)/1.02 var(--titulo); letter-spacing: -0.03em; color: var(--e13-fuerte); text-wrap: balance; }
.e13l__esp { margin: 0; max-width: 36ch; line-height: 1.5; color: var(--ink-2); }
.e13l__lista { list-style: none; margin: 14px 0 0; padding: 0; width: 100%; display: grid; gap: 10px; }
.e13l__lista a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--e13-borde); border-radius: 4px; background: var(--e13-caja); color: var(--ink); text-align: left; text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.e13l__lista a:hover { border-color: var(--e13-naranja); transform: translateY(-1px); }
.e13l__lista span { display: grid; gap: 3px; min-width: 0; font: 600 1rem/1.25 var(--texto); }
.e13l__lista small { font: 400 0.82rem/1.3 var(--texto); color: var(--ink-3); overflow-wrap: anywhere; }
.e13l__lista i { margin-left: auto; font-style: normal; color: var(--ink-3); }
.e13l__lista .es-principal { border-color: var(--e13-boton-hover); background: var(--e13-boton-hover); color: var(--e13-boton-hover-texto); }
.e13l__lista .es-principal small, .e13l__lista .es-principal i { color: inherit; opacity: 0.72; }
.e13l__lista .es-principal svg { color: var(--e13-naranja); }
.e13l__pie { margin: 18px 0 0; font-size: 0.82rem; color: var(--ink-3); }
.e13l__pie a { color: inherit; }
.e13m-dir { padding-block: clamp(24px, 4vw, 40px) clamp(56px, 8vw, 104px); }
.e13m-dir__cab { display: grid; gap: 14px; justify-items: start; margin-top: clamp(24px, 4vw, 48px); }
.e13m-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.e13m-filtros input { position: absolute; opacity: 0; pointer-events: none; }
.e13m-filtros label { display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 14px; border: 1px solid var(--e13-borde); border-radius: 999px; font: 600 0.88rem/1 var(--texto); color: var(--ink-2); cursor: pointer; }
.e13m-filtros label small { font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.e13m-filtros input:checked + label { border-color: var(--e13-fuerte); background: var(--e13-fuerte); color: var(--bg); }
.e13m-filtros input:checked + label small { color: inherit; opacity: 0.7; }
.e13m-filtros input:focus-visible + label { outline: 2px solid var(--e13-naranja); outline-offset: 2px; }
.e13-cap__cuerpo > .e13-enlace { justify-self: start; }
.e13-cap__cuerpo > .e13m-tabla { margin-top: 0; }
.e13m-tabla { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.e13m-miembro a { display: grid; align-content: start; gap: 12px; height: 100%; padding: 10px 10px 14px; border: 1px solid var(--e13-borde); border-radius: 6px; color: inherit; text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.e13m-miembro a:hover { border-color: var(--e13-naranja); transform: translateY(-2px); }
.e13m-miembro__txt { display: grid; gap: 4px; padding-inline: 4px; }
.e13m-miembro i { font: 600 0.68rem/1.2 var(--texto); font-style: normal; letter-spacing: 0.16em; text-transform: uppercase; color: var(--e13-naranja-texto); }
.e13m-miembro__txt b { font: 700 1.05rem/1.2 var(--titulo); color: var(--e13-fuerte); }
.e13m-miembro__txt > span { font-size: 0.84rem; line-height: 1.4; color: var(--ink-2); }
.e13m-miembro--ejemplo a { border-style: dashed; opacity: 0.85; }
.e13m-dir:has(#e13f-obra:checked) .e13m-miembro:not([data-ambito="obra"]),
.e13m-dir:has(#e13f-taller:checked) .e13m-miembro:not([data-ambito="taller"]),
.e13m-dir:has(#e13f-diseno:checked) .e13m-miembro:not([data-ambito="diseno"]),
.e13m-dir:has(#e13f-industria:checked) .e13m-miembro:not([data-ambito="industria"]) { display: none; }
@media (max-width: 720px) {
  .e13m-cab__grilla { grid-template-columns: minmax(0, 1fr); }
  .e13m-retrato { width: min(200px, 60%); }
  .e13m-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
  .e13m-obra--suelta { grid-template-columns: minmax(0, 1fr); }
  .e13m-obra--suelta img { max-width: 260px; }
  .e13m-tabla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .e13m-redes a, .e13l__lista a, .e13m-miembro a { transition: none; }
}

@media (max-width: 960px) {
  .e13-cap__grilla, .e13-ficha { grid-template-columns: minmax(0, 1fr); }
  .e13-cap__cab { position: static; }
}
@media (max-width: 640px) {
  .e13-benef__grupo, .e13-dos, .e13-pasos { grid-template-columns: minmax(0, 1fr); }
  .e13-si { padding-right: 0; }
  .e13-no { padding: 36px 0 0; border-left: 0; }
  .e13-heroe__barra { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .e13-tarjeta::after, a.e13-tarjeta, .e13-tarjeta__ir, a.e13m-retrato, .e13m-retrato__ir, .e13-btn, .e13-btn span, .e13-faq summary::after { transition: none; }
}