/* ==========================================================
   Panel logístico del Perú · estilos
   Identidad visual: Montserrat · #003024 · #034c3c · #03e35c · #75f585 · #FFFFFF
   Estilo "motion design": entradas escalonadas, números que cuentan, líneas que se
   dibujan y microinteracciones. Todo el movimiento se apaga si la persona
   tiene activada la opción de "reducir movimiento" en su dispositivo.
   El verde brillante se reserva para acciones, indicadores positivos y gráficos destacados.
   ========================================================== */

:root {
  --c-principal: #003024;
  --c-secundario: #034c3c;
  --c-accion: #03e35c;
  --c-apoyo: #75f585;
  --c-fondo: #ffffff;

  /* Neutros */
  --c-texto: #0d241d;
  --c-muted: #5a6e67;
  --c-borde: #e1e9e6;
  --c-superficie: #f4f8f6;

  /* Variaciones y estados */
  --c-pos: #0a7a3a;            /* texto de variación positiva */
  --c-pos-bg: rgba(3, 227, 92, 0.16);
  --c-neg: #c62828;            /* texto de variación negativa */
  --c-neg-bg: rgba(198, 40, 40, 0.1);
  --c-critico: #c62828;
  --c-aviso: #e08a00;

  --radio: 18px;
  --sombra: 0 1px 2px rgba(0, 48, 36, 0.05), 0 8px 24px rgba(0, 48, 36, 0.06);
  --sombra-alta: 0 2px 4px rgba(0, 48, 36, 0.06), 0 16px 36px rgba(0, 48, 36, 0.12);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ancho: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--c-texto);
  background: var(--c-fondo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: clamp(14px, 3vw, 28px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--c-accion); outline-offset: 2px; }

/* ---------- Encabezado animado ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: linear-gradient(120deg, #003024 0%, #034c3c 100%); }
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.blob { position: absolute; border-radius: 50%; filter: blur(52px); animation: flotar 16s ease-in-out infinite alternate; }
.b1 { width: 340px; height: 340px; background: var(--c-accion); top: -150px; right: 8%; opacity: 0.3; }
.b2 { width: 280px; height: 280px; background: var(--c-apoyo); bottom: -170px; left: 14%; opacity: 0.2; animation-duration: 21s; animation-delay: -7s; }
.rejilla {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
  animation: deslizar 20s linear infinite;
}
.hero-in { padding-block: clamp(28px, 5.5vw, 52px); }
.hero-titulo { display: flex; flex-wrap: wrap; gap: 0.1em 0.38em; font-size: clamp(1.4rem, 4.1vw, 2.6rem); font-weight: 800; letter-spacing: 0.02em; line-height: 1.12; }
.hero-titulo .w { display: inline-block; overflow: hidden; padding-bottom: 0.08em; }
.hero-titulo .w > span { display: inline-block; animation: subir 0.85s var(--ease) both; animation-delay: calc(var(--i) * 110ms + 120ms); }
.hero-linea { display: block; height: 4px; width: 0; margin-top: 18px; border-radius: 4px; background: linear-gradient(90deg, var(--c-accion), var(--c-apoyo)); animation: crecer 1s 0.7s var(--ease) forwards; }
@keyframes subir { from { transform: translateY(110%); } to { transform: none; } }
@keyframes crecer { to { width: clamp(90px, 15vw, 170px); } }
@keyframes flotar { to { transform: translate(-46px, 34px) scale(1.18); } }
@keyframes deslizar { to { background-position: 44px 44px; } }

.banner { background: var(--c-superficie); border-bottom: 1px solid var(--c-borde); font-size: 0.82rem; color: var(--c-secundario); }
.banner .wrap { display: flex; align-items: center; gap: 10px; padding-block: 10px; }

/* ---------- Estructura ---------- */
.main { display: flex; flex-direction: column; gap: 20px; padding-block: 24px 38px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 960px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* Aparición al hacer scroll (solo si el JavaScript está activo) */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js .reveal.visible { opacity: 1; transform: none; }

.card { background: var(--c-fondo); border: 1px solid var(--c-borde); border-radius: var(--radio); padding: clamp(16px, 2.2vw, 24px); box-shadow: var(--sombra); min-width: 0; }
.card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.card h2 { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.005em; }
.note { font-size: 0.78rem; color: var(--c-muted); margin-top: 2px; }
.card-foot { margin-top: 14px; display: flex; justify-content: flex-end; }
.chip { font-size: 0.7rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--c-borde); color: var(--c-muted); background: var(--c-superficie); white-space: nowrap; }
.vacio { font-size: 0.85rem; color: var(--c-muted); padding: 16px 4px; text-align: center; }

.upd { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 0.76rem; color: var(--c-muted); margin-bottom: -6px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-accion); box-shadow: 0 0 0 0 rgba(3, 227, 92, 0.6); animation: latido 2s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 9px rgba(3, 227, 92, 0); } 100% { box-shadow: 0 0 0 0 rgba(3, 227, 92, 0); } }

/* ---------- Variaciones: verde si es positiva, rojo si es negativa ---------- */
.chg { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chg::before { content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.chg[data-dir="up"]::before { border-bottom: 6px solid currentColor; }
.chg[data-dir="down"]::before { border-top: 6px solid currentColor; }
.chg[data-dir="flat"]::before { width: 8px; height: 2px; border: 0; background: currentColor; border-radius: 2px; }
.chg.pos { color: var(--c-pos); background: var(--c-pos-bg); }
.chg.neg { color: var(--c-neg); background: var(--c-neg-bg); }
.chg.flat { color: var(--c-muted); background: var(--c-superficie); }

/* ---------- Indicadores ---------- */
.kpis { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 20px; }
.kpi-diesel { grid-row: span 2; }
@media (max-width: 860px) { .kpis { grid-template-columns: minmax(0, 1fr); } .kpi-diesel { grid-row: auto; } }
.kpi { background: var(--c-fondo); border: 1px solid var(--c-borde); border-radius: var(--radio); padding: 20px 22px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: box-shadow 0.25s, transform 0.25s var(--ease), border-color 0.25s; }
.kpi:hover { box-shadow: var(--sombra-alta); transform: translateY(-3px); border-color: rgba(3, 227, 92, 0.55); }
.kpi-label { font-size: 0.74rem; font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.kpi-sub { font-size: 0.72rem; color: var(--c-muted); margin-bottom: 6px; }
.kpi-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.kpi-val { position: relative; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: clamp(1.9rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; color: var(--c-principal); font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi-val small { font-size: 0.72rem; font-weight: 500; letter-spacing: 0; color: var(--c-muted); }
.kpi-chg { font-size: 0.78rem; color: var(--c-muted); font-variant-numeric: tabular-nums; }
/* La línea del tipo de cambio crece para ocupar todo el espacio libre de la tarjeta */
.kpi-spark { flex: 1; min-height: 64px; margin-top: 8px; }
.kpi-spark .spark { width: 100%; height: 100%; display: block; }
.pulso { width: 10px; height: 10px; border-radius: 50%; background: var(--c-critico); align-self: center; animation: latido-rojo 1.8s infinite; }
@keyframes latido-rojo { 0% { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(198, 40, 40, 0); } 100% { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0); } }
.barra-estados { display: flex; height: 8px; flex: none; border-radius: 99px; overflow: hidden; background: var(--c-superficie); margin-top: 8px; transform-origin: left; animation: barra 1s 0.3s var(--ease) both; }
.barra-estados span { height: 100%; flex: var(--n, 0) 1 0; }
.b-crit { background: var(--c-critico); }
.b-aviso { background: var(--c-aviso); }
@keyframes barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.kpi-sub-zonas { margin: 12px 0 0; }
/* Alertas por zona: barras que crecen para llenar el resto de la tarjeta */
.alertas-zonas { flex: 1; min-height: 76px; display: flex; align-items: stretch; gap: 10px; }
.az { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.az-n { font-size: 0.78rem; font-weight: 800; color: var(--c-principal); font-variant-numeric: tabular-nums; }
.az-pista { flex: 1; width: 100%; display: flex; flex-direction: column; min-height: 36px; }
.az-vacio { flex: var(--v, 1) 1 0; }
.az-barra { flex: var(--p, 0.06) 1 0; min-height: 4px; border-radius: 7px 7px 3px 3px; background: var(--zc); transform-origin: bottom; animation: barra-sube 0.9s 0.4s var(--ease) both; }
.az-barra.cero { background: var(--c-borde); }
.az-nom { font-size: 0.62rem; font-weight: 600; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@keyframes barra-sube { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.listo .barra-estados, .listo .az-barra { animation: none; }

/* Diésel por zona (lista dentro del indicador): las filas se reparten el alto disponible */
.zona-lista { flex: 1; display: flex; flex-direction: column; }
.zona-lista li { flex: 1; min-height: 46px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(54px, 0.9fr) auto auto; align-items: center; gap: 4px 14px; border-bottom: 1px solid var(--c-borde); font-variant-numeric: tabular-nums; }
.zona-lista li:last-child { border-bottom: 0; }
.zl-nombre { display: inline-flex; align-items: center; gap: 8px; font-size: 0.84rem; font-weight: 600; }
.zl-spark { height: 28px; min-width: 0; display: block; }
.zl-spark .spark { width: 100%; height: 100%; }
.zl-precio { font-size: 1.15rem; font-weight: 800; color: var(--c-principal); text-align: right; min-width: 3.4em; }
.zl-cambio { min-width: 5.6em; text-align: right; }
@media (max-width: 480px) { .zona-lista li { grid-template-columns: minmax(0, 1fr) auto auto; } .zl-spark { display: none; } }

/* Líneas pequeñas que se dibujan */
.spark-linea { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: dibujar 1.3s 0.35s var(--ease) forwards; }
.spark-area { stroke: none; opacity: 0; animation: aparecer 0.8s 1s ease forwards; }
.spark-punto { opacity: 0; animation: aparecer-punto 0.4s 1.4s ease forwards; }
.listo .spark-linea { animation: none; stroke-dashoffset: 0; }
.listo .spark-area, .listo .spark-punto { animation: none; opacity: 1; }
.listo .spark-area { opacity: 0.18; }
.sin-reveal .reveal { opacity: 1 !important; transform: none !important; }
@keyframes dibujar { to { stroke-dashoffset: 0; } }
@keyframes aparecer { to { opacity: 0.18; } }
@keyframes aparecer-punto { to { opacity: 1; } }

.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; border: 1px solid rgba(0, 48, 36, 0.15); }

/* ---------- Mapa oficial de la SUTRAN (todo el ancho) ---------- */
.mapa-oficial { height: clamp(460px, 74vh, 720px); border-radius: 14px; border: 1px solid var(--c-borde); overflow: hidden; background: var(--c-superficie); }
.mapa-oficial iframe { width: 100%; height: 100%; border: 0; display: block; }
.oficial-nota { margin-top: 10px; }
.zonas-detalle { margin-top: 10px; font-size: 0.78rem; color: var(--c-muted); }
.zonas-detalle summary { cursor: pointer; font-weight: 600; color: var(--c-secundario); }
.zonas-detalle p { margin-top: 6px; }
.chips-zona { display: flex; flex-wrap: wrap; gap: 8px; }
.zona-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--c-borde); background: var(--c-fondo); color: var(--c-texto); font-size: 0.76rem; font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--ease); }
.zona-chip:hover { border-color: var(--zc, var(--c-secundario)); transform: translateY(-1px); }
.zona-chip[aria-pressed="true"] { background: var(--zc, var(--c-principal)); border-color: var(--zc, var(--c-principal)); color: var(--zt, #fff); }
.zona-chip[aria-pressed="true"] .dot { background: var(--zt, #fff) !important; border-color: transparent; }

/* ---------- Alertas (filtros y tabla) ---------- */
.filtros { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.filtros input { width: 100%; font: inherit; font-size: 0.82rem; padding: 11px 14px; border: 1.5px solid var(--c-borde); border-radius: 12px; background: var(--c-fondo); color: var(--c-texto); transition: border-color 0.2s, box-shadow 0.2s; }
.filtros input:focus { outline: none; border-color: var(--c-secundario); box-shadow: 0 0 0 4px rgba(3, 76, 60, 0.1); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; border: 1.5px solid var(--c-borde); background: var(--c-fondo); color: var(--c-texto); font-size: 0.76rem; font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.pill b { font-weight: 800; font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 99px; background: var(--c-superficie); color: var(--c-principal); font-size: 0.7rem; }
.pill:hover { border-color: var(--c-secundario); }
.pill.is-on { background: var(--c-principal); border-color: var(--c-principal); color: #fff; }
.pill.is-on b { background: rgba(255, 255, 255, 0.18); color: #fff; }
.tabla-wrap { flex: 1; max-height: 430px; overflow: auto; border: 1px solid var(--c-borde); border-radius: 14px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.tabla th { position: sticky; top: 0; z-index: 1; background: var(--c-superficie); text-align: left; font-weight: 700; color: var(--c-muted); padding: 10px 12px; border-bottom: 1px solid var(--c-borde); white-space: nowrap; }
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--c-borde); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr { animation: fila 0.45s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); transition: background 0.2s; }
.tabla tbody tr:hover { background: var(--c-superficie); }
@keyframes fila { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.via { display: block; font-weight: 700; color: var(--c-principal); }
.dep { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 0.72rem; color: var(--c-muted); font-weight: 500; }
.dep .dot { width: 8px; height: 8px; }
.est { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; padding: 2px 9px; border-radius: 99px; font-size: 0.72rem; }
.est::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.est.interrumpido { color: var(--c-critico); background: var(--c-neg-bg); }
.est.restringido { color: #a86500; background: rgba(224, 138, 0, 0.14); }
@media (max-width: 560px) {
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tbody tr { padding: 10px 12px; border-bottom: 1px solid var(--c-borde); }
  .tabla td { display: flex; justify-content: space-between; gap: 14px; border: 0; padding: 3px 0; text-align: right; }
  .tabla td::before { content: attr(data-label); color: var(--c-muted); font-weight: 600; text-align: left; }
}

/* ---------- Gráficos ---------- */
.card-grafico, .card-lista { display: flex; flex-direction: column; }
.card-grafico .card-head { min-height: 3.4rem; }
.leyenda-graf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 38px; margin-bottom: 8px; font-size: 0.76rem; color: var(--c-muted); }
.ley-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; border: 1.5px solid var(--c-borde); background: var(--c-fondo); color: var(--c-texto); font-size: 0.76rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s, border-color 0.2s, transform 0.2s var(--ease); }
.ley-chip:hover { border-color: var(--zc); transform: translateY(-1px); }
.ley-chip[aria-pressed="false"] { opacity: 0.45; text-decoration: line-through; }
.ley-chip.fijo { cursor: default; }
.ley-chip.fijo:hover { transform: none; border-color: var(--c-borde); }
.ley-dato { font-variant-numeric: tabular-nums; }
.ley-dato b { color: var(--c-principal); font-weight: 700; }
.chart-box { position: relative; flex: 1; min-height: 300px; }
.card-foot { margin-top: 14px; display: flex; justify-content: flex-end; }
.btn-sec { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1.5px solid var(--c-borde); border-radius: 11px; background: var(--c-fondo); color: var(--c-principal); font-size: 0.76rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease); }
.btn-sec:hover { border-color: var(--c-secundario); background: var(--c-superficie); transform: translateY(-1px); }
.btn-sec.hecho { border-color: var(--c-accion); background: var(--c-pos-bg); color: var(--c-pos); }

/* ---------- Noticias ---------- */
.noticias { display: flex; flex-direction: column; max-height: 430px; overflow: auto; }
.noticias li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 14px; padding: 14px 8px; border-bottom: 1px solid var(--c-borde); border-radius: 10px; transition: background 0.2s, transform 0.25s var(--ease); }
.noticias li:last-child { border-bottom: 0; }
.noticias li:hover { background: var(--c-superficie); transform: translateX(4px); }
.not-hora { font-size: 0.74rem; font-weight: 700; color: var(--c-muted); font-variant-numeric: tabular-nums; padding-top: 2px; }
.not-hora.nuevo { color: var(--c-pos); }
.not-tit { font-size: 0.92rem; font-weight: 700; color: var(--c-principal); text-decoration: none; line-height: 1.35; }
.not-tit:hover { text-decoration: underline; }
.not-medio { display: block; font-size: 0.74rem; color: var(--c-muted); margin-top: 2px; }

/* ---------- Pie ---------- */
.pie { position: relative; overflow: hidden; background: linear-gradient(120deg, #003024 0%, #034c3c 100%); color: #fff; margin-top: 10px; }
.pie-in { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 30px 48px; align-items: center; padding-block: 40px; }
@media (max-width: 820px) { .pie-in { grid-template-columns: minmax(0, 1fr); } }
.pie-apoyo h2 { font-size: 1.15rem; font-weight: 800; line-height: 1.3; margin-bottom: 8px; }
.pie-apoyo p { font-size: 0.86rem; color: rgba(255, 255, 255, 0.82); max-width: 40rem; }
.pie-apoyo strong { color: #fff; }
.btn-patreon { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 13px 22px; border-radius: 12px; background: var(--c-accion); color: var(--c-principal); font-weight: 800; font-size: 0.92rem; text-decoration: none; transition: transform 0.2s var(--ease), box-shadow 0.2s; box-shadow: 0 6px 20px rgba(3, 227, 92, 0.28); }
.btn-patreon i { font-size: 1.15rem; }
.btn-patreon::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-20deg); animation: brillo 4.5s ease-in-out infinite; }
.btn-patreon:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(3, 227, 92, 0.4); }
@keyframes brillo { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.pie-autor { display: flex; align-items: center; gap: 16px; justify-content: flex-end; }
@media (max-width: 820px) { .pie-autor { justify-content: flex-start; } }
.autor-foto { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--c-accion); flex: none; }
.autor-nombre { font-size: 0.9rem; color: rgba(255, 255, 255, 0.82); }
.autor-nombre strong { color: #fff; font-weight: 800; }
.redes { display: flex; gap: 8px; margin-top: 10px; }
.redes a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); color: #fff; text-decoration: none; font-size: 0.98rem; transition: background 0.2s, color 0.2s, transform 0.25s var(--ease); }
.redes a:hover { background: var(--c-accion); color: var(--c-principal); transform: translateY(-3px) scale(1.06); }

/* ---------- Reducir movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; }
  .spark-linea { stroke-dashoffset: 0; }
  .spark-area { opacity: 0.18; }
  .spark-punto { opacity: 1; }
}