/* =====================================================
   ALTALTIUM · ESTILO COMPARTIDO (header + footer)
   Mismo lenguaje visual que el blog (noticias.altaltium.com),
   inspirado en jeton.com. Portado de public_html/noticias/css/blog.css
   — solo variables + nav + footer, sin tocar el resto de la página.
   ===================================================== */

/* Montserrat servida desde el propio sitio (no desde Google Fonts):
   así el peso 800/900 (negritas) siempre carga, sin depender de que
   el navegador del visitante logre conectarse a fonts.gstatic.com
   (bloqueadores de anuncios/privacidad a veces lo impiden). Es
   variable-font: un solo archivo cubre todo el rango de pesos. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/RECURSOS/FONTS/montserrat-latin-var.woff2') format('woff2-variations'),
       url('/RECURSOS/FONTS/montserrat-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/RECURSOS/FONTS/montserrat-latinext-var.woff2') format('woff2-variations'),
       url('/RECURSOS/FONTS/montserrat-latinext-var.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg:           #070708;
  --bg2:          #0f0f11;
  --bg3:          #17171a;
  --bg4:          #1f1f24;
  /* Color al que se funden los degradados radiales (tarjetas del
     carrusel, etc.) para que no se note el borde de la caja.
     Cuando exista modo claro, aquí va blanco en vez de negro. */
  --surface-fade: var(--bg);
  --border:       #232328;
  --border2:      #2f2f36;
  --text:         #f5f6f7;
  --text2:        #b3b8be;
  /* #7d828a y no #71767d: el gris anterior daba 4.40 de contraste sobre el
     fondo base y 4.18 sobre el elevado, cuando el minimo que exige Google
     (y la norma WCAG AA) para texto normal es 4.5. Se usa en subtitulos,
     pies de foto y footer de todo el sitio, asi que fallaba en muchos
     sitios a la vez. Con este valor da 5.21, 4.95 y 4.63 sobre los tres
     fondos, y a simple vista es practicamente el mismo gris. */
  --text3:        #7d828a;
  --accent:       #00cccc;
  --accent-h:     #3ae6e6;
  --accent-dark:  rgba(0,204,204,.08);
  --accent-mid:   rgba(0,204,204,.16);
  --on-accent:    #032222;

  /* Cian claro para texto pequeno encima de una foto. El cian normal
     (#00cccc) en 13px sobre una foto clara da 2.19 de contraste y el
     minimo es 4.5; con este y un halo oscuro sube a 4.89. Solo para ese
     caso: en fondos planos se usa --accent. */
  --accent-hi:    #5cf0f0;

  /* Version transparente de --bg, para los fundidos entre secciones.
     Hace falta como token aparte porque en CSS no se puede escribir
     "el color de --bg pero con opacidad 0"; y usar la palabra
     "transparent" no vale: al mezclarse pasa por negro puro y en un
     degradado deja una banda sucia. Si algun dia cambia --bg (modo
     claro), hay que cambiar esta a juego. */
  --bg-t:         rgba(7, 7, 8, 0);
  --fh:           'Montserrat', 'Segoe UI', Arial, sans-serif;
  --fb:           'Segoe UI', Arial, sans-serif;
  --r:            10px;
  --r2:           18px;
  --r3:           28px;
  --shadow:       0 4px 24px rgba(0,0,0,.4);
  --trans:        all .2s ease;
  --ease:         cubic-bezier(.22, 1, .36, 1);
  --nav-h:        72px;
  --glow:         rgba(0,204,204,.16);
  /* Más opacas que en el blog: aquí el header flota sobre fotos/video
     claros en vez de un fondo oscuro fijo, así que necesita más opacidad
     para leerse negro sólido en vez de gris lavado. */
  --glass1:       rgba(7,7,8,.94);
  --glass2:       rgba(7,7,8,.98);
  --overlay:      rgba(7,7,8,.97);
  /* Estados de validación: rojo y verde desaturados para que convivan con
     el cian de marca sobre fondo oscuro sin gritar. Ambos pasan AA sobre
     --bg2 y --bg3, que son los fondos donde se usan. */
  --danger:       #ff6b6b;
  --danger-bg:    rgba(255,107,107,.14);
  --ok:           #3ddc97;
  --ok-bg:        rgba(61,220,151,.14);
}

/* ── Navegación ──────────────────────────────────────── */
.nav-blog {
  position: sticky;
  top: 0;
  /* 1300 y no 1200: el menu movil cuelga del body con z-index 1290. Al
     ser esta cabecera sticky crea su propio contexto de apilamiento, asi
     que el z-index alto del boton de la hamburguesa solo contaba entre
     los hijos de la cabecera; frente al menu valia 1200 y quedaba
     enterrado. Por eso no habia forma de cerrar el menu. */
  z-index: 1300;
  width: 100%;
  background: var(--glass1);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: transform .45s var(--ease), background .3s ease, border-color .3s ease;
}
.nav-blog.nav-scrolled {
  background: var(--glass2);
  border-bottom-color: var(--border);
}
.nav-blog.nav-oculto { transform: translateY(-100%); }
.nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--nav-h);
}
a.nav-logo-txt {
  font-family: var(--fh);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
  letter-spacing: .02em;
  flex-shrink: 0;
}
a.nav-logo-txt span { color: var(--accent); }
.nav-links {
  display: flex;
  align-items: center;
  gap: .25rem;
}
.nav-links a {
  font-family: var(--fh);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text2);
  text-decoration: none;
  padding: .55rem .9rem;
  border-radius: 999px;
  transition: var(--trans);
}
.nav-links a:hover { color: var(--text); background: var(--bg3); }
.nav-links a.activo { color: var(--accent); background: var(--accent-dark); }
/* ── Menú "Soluciones" (desktop: dropdown hover/focus;
   móvil: pills siempre visibles bajo el enlace, ver media
   query más abajo) ──────────────────────────────────── */
.nav-drop { position: relative; }
.nav-drop__trigger { display: inline-flex; align-items: center; gap: 4px; }
.nav-drop__chev {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  transition: transform .25s var(--ease);
}
.nav-drop:hover .nav-drop__chev,
.nav-drop:focus-within .nav-drop__chev { transform: rotate(180deg); }
.nav-drop__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 8px);
  width: 300px;
  background: var(--glass2);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  padding: 10px;
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  z-index: 1210;
}
.nav-drop:hover .nav-drop__menu,
.nav-drop:focus-within .nav-drop__menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav-drop__menu a,
.nav-drop__menu a:link,
.nav-drop__menu a:visited {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text2);
}
.nav-drop__menu a:hover,
.nav-drop__menu a:focus-visible { background: var(--bg3); color: var(--text); }
.nav-drop__menu strong { font-family: var(--fh); font-size: .82rem; font-weight: 700; color: var(--text); }
.nav-drop__menu span { font-size: .72rem; color: var(--text3); }
.nav-drop__all,
.nav-drop__all:link,
.nav-drop__all:visited {
  margin-top: 4px;
  border-top: 1px solid var(--border);
  padding-top: 12px !important;
  font-family: var(--fh);
  font-weight: 700;
  font-size: .78rem;
  color: var(--accent) !important;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.nav-right { display: flex; align-items: center; gap: .6rem; }
a.nav-cta {
  font-family: var(--fh);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border2);
  padding: .55rem 1.15rem;
  border-radius: 999px;
  transition: var(--trans);
  white-space: nowrap;
}
a.nav-cta:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dark); }

/* Botón de tema claro/oscuro — placeholder visual por ahora, sin
   funcionar todavía (llega en la fase del cuerpo con modo claro/oscuro).
   Mismo marcado y estilo que usa noticias, para que el header se vea
   idéntico mientras tanto. */
.theme-toggle {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border2);
  border-radius: 50%;
  background: transparent;
  color: var(--text2);
  cursor: default;
  flex-shrink: 0;
  transition: var(--trans);
}
.theme-toggle svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 17px;
  margin: -8.5px 0 0 -8.5px;
}
.theme-toggle .ico-sol { display: none; }

/* Hamburguesa */
.nav-toggle {
  display: none;
  position: relative;
  z-index: 1320;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border2);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: var(--trans);
  flex-shrink: 0;
}
.nav-toggle span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .35s var(--ease);
}
.nav-toggle span:nth-child(1) { transform: translate(-50%, calc(-50% - 4px)); }
.nav-toggle span:nth-child(2) { transform: translate(-50%, calc(-50% + 4px)); }
body.menu-abierto .nav-toggle span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
body.menu-abierto .nav-toggle span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

/* =====================================================
   MENÚ MÓVIL

   Antes tenia tres problemas de fondo:

   1. NO SE PODIA CERRAR. El unico boton estaba en la cabecera, que es
      sticky con z-index 1200 y por tanto crea su propio contexto de
      apilamiento: el 1320 del boton solo competia entre los hijos de la
      cabecera, asi que frente al resto de la pagina valia 1200. El menu
      cuelga del body con 1290, y 1290 > 1200, asi que el menu sepultaba
      su propio boton. La unica salida era elegir una pestana. Ahora la
      cabecera sube a 1300 Y ademas el menu lleva su propia "X" dentro.

   2. FALTABA "INICIO". No habia manera de volver a la portada.

   3. DOS LENGUAJES VISUALES PELEADOS. Titulos enormes en Montserrat 900
      conviviendo con pastillas pequenas de borde redondo, cada una de un
      ancho distinto segun su texto, que dejaban el borde derecho dentado.
      Y las soluciones perdian su descripcion, que si aparece en
      escritorio. Ahora todo son filas separadas por lineas finas, el
      mismo recurso que usa "Red de expertos".
   ===================================================== */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 1290;
  background: var(--overlay);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  /* Alineado arriba y no centrado: centrado dejaba 114px muertos por
     encima del primer enlace y empujaba el contacto fuera de la vista. */
  justify-content: flex-start;
  /* Hueco arriba del alto de la cabecera. La cabecera se queda visible por
     encima del menu (z-index 1300 contra 1290) a proposito: ahi vive el
     boton de la hamburguesa, que al abrir se convierte en una X. Ese es el
     boton de cerrar, y asi no hay dos barras encimadas ni dos logos.
     Antes la cabecera valia 1200 y el menu la tapaba: por eso no habia
     forma de salir sin elegir una pestana. */
  padding: calc(var(--nav-h, 72px) + .75rem) 0 0;
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: opacity .35s var(--ease), visibility .35s;
}
body.menu-abierto .menu-movil { opacity: 1; visibility: visible; }
body.menu-abierto { overflow: hidden; }

/* ── Lista principal ────────────────────────────────── */
.menu-movil nav {
  display: flex;
  flex-direction: column;
  padding: .5rem 1.5rem 0;
}
.menu-movil nav > a,
.menu-movil__fila > a,
.menu-movil__acordeon {
  font-family: var(--fh);
  /* 1.55rem y no 2.6: a ese tamano "Estimaciones" ocupaba casi toda la
     linea y no cabian los seis destinos sin desplazar. */
  font-size: clamp(1.35rem, 5.6vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
  text-decoration: none;
  text-align: left;
  width: 100%;
  padding: .95rem 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), color .2s;
}
/* Se quitan las flechas "→" que llevaba cada titulo: repetian el destino
   del propio texto y no aportaban nada. */
.menu-movil nav > a::after { content: none; }
.menu-movil nav > a:hover,
.menu-movil__acordeon:hover { color: var(--accent); }
.menu-movil nav > a.activo { color: var(--accent); }

body.menu-abierto .menu-movil nav > a,
body.menu-abierto .menu-movil__fila > a,
body.menu-abierto .menu-movil__acordeon { opacity: 1; transform: none; }
body.menu-abierto .menu-movil nav > *:nth-child(1) { transition-delay: .05s; }
body.menu-abierto .menu-movil nav > *:nth-child(2) { transition-delay: .10s; }
body.menu-abierto .menu-movil nav > *:nth-child(3) { transition-delay: .15s; }
body.menu-abierto .menu-movil nav > *:nth-child(4) { transition-delay: .20s; }
body.menu-abierto .menu-movil nav > *:nth-child(5) { transition-delay: .25s; }
body.menu-abierto .menu-movil nav > *:nth-child(6) { transition-delay: .30s; }

/* ── Soluciones: acordeón ───────────────────────────── */
.menu-movil__grupo { display: contents; }

/* El titulo (enlace a la pagina) y la flecha (desplegar) comparten fila
   pero son dos objetivos distintos: cada uno hace una sola cosa. */
.menu-movil__fila {
  display: flex;
  align-items: center;
  gap: .5rem;
  border-bottom: 1px solid var(--border);
}
.menu-movil__fila > a {
  flex: 1;
  border-bottom: 0;
  /* El texto no llega hasta la flecha: asi no hay duda de donde acaba una
     zona y empieza la otra. */
  padding-right: .5rem;
}
.menu-movil__acordeon {
  /* 44x44 es el minimo para acertar con el dedo sin darle al titulo. */
  flex: none;
  width: 44px;
  height: 44px;
  justify-content: center;
  padding: 0;
  border-bottom: 0;
  border-radius: 50%;
}
.menu-movil__acordeon:hover,
.menu-movil__acordeon:focus-visible { background: rgba(255, 255, 255, .05); }
.menu-movil__chev {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--text3);
  transition: transform .3s var(--ease), color .2s;
}
.menu-movil__acordeon[aria-expanded="true"] .menu-movil__chev {
  transform: rotate(180deg);
  color: var(--accent);
}

.menu-movil__sub {
  display: flex;
  flex-direction: column;
  padding: .35rem 0 .9rem;
  border-bottom: 1px solid var(--border);
}
.menu-movil__sub a {
  display: block;
  padding: .6rem 0 .6rem .9rem;
  /* La linea de la izquierda marca que estas dentro de "Soluciones", sin
     necesidad de sangrar el texto ni de encerrarlo en una caja. */
  border-left: 2px solid var(--border2);
  color: var(--text2);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.menu-movil__sub a:hover,
.menu-movil__sub a:focus-visible { border-left-color: var(--accent); color: var(--text); }
.menu-movil__sub strong {
  display: block;
  font-family: var(--fh);
  font-size: .98rem;
  font-weight: 700;
  color: var(--text);
}
.menu-movil__sub span {
  display: block;
  margin-top: .12rem;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--text3);
}
.menu-movil__todas {
  margin-top: .35rem;
  font-family: var(--fh);
  font-size: .8rem !important;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent) !important;
  border-left-color: var(--accent) !important;
}

/* ── Pie del menú ───────────────────────────────────── */
.menu-movil-pie {
  margin-top: auto;
  padding: 1.6rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Selector con dos clases: con una sola, otra regla del menu le ganaba y
   dejaba el texto casi blanco sobre el cian. Contraste medido 1.85 cuando
   el minimo legible es 4.5. Con el color correcto sube a 8.6. */
.menu-movil-pie .menu-movil__cta {
  display: block;
  padding: .9rem 1.2rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--fh);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease;
}
.menu-movil__cta:hover,
.menu-movil__cta:focus-visible { background: var(--accent-h); transform: translateY(-1px); }
.menu-movil__cta:active { transform: scale(.985); }

.menu-movil-pie__datos {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .8rem;
  color: var(--text3);
}
.menu-movil-pie__datos a { color: var(--text2); text-decoration: none; }
.menu-movil-pie__datos a:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .menu-movil nav > a,
  .menu-movil__acordeon,
  .menu-movil__chev,
  .menu-movil__cerrar,
  .menu-movil__cta { transition: none; }
  body.menu-abierto .menu-movil nav > *,
  .menu-movil nav > a,
  .menu-movil__acordeon { opacity: 1; transform: none; }
}

/* En pantallas muy bajas (o con el teclado abierto) el menú se desplaza
   por dentro en vez de recortar el contacto. */
@media (max-height: 620px) {
  .menu-movil nav > a,
  .menu-movil__acordeon { font-size: 1.2rem; padding: .7rem 0; }
  .menu-movil-pie { padding: 1.1rem 1.5rem 1.4rem; }
}

/* ── Footer ──────────────────────────────────────────── */
.blog-footer {
  border-top: 1px solid var(--border);
  background: var(--bg2);
}
.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) 2rem 2.5rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.footer-brand .nav-logo-txt { font-size: 1.35rem; }
.footer-tagline {
  color: var(--text3);
  font-size: .85rem;
  font-weight: 300;
  max-width: 320px;
  margin: .9rem 0 1.5rem;
}
.footer-social { display: flex; gap: .5rem; }
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border2);
  border-radius: 50%;
  color: var(--text2);
  transition: var(--trans);
}
.footer-social a:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dark);
  transform: translateY(-3px);
}
.footer-social svg { width: 15px; height: 15px; }
.footer-col h3,
.footer-col h4 {
  font-family: var(--fh);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text3);
  margin: 0 0 1.1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .55rem; }
.footer-col a, .footer-col p {
  color: var(--text2);
  font-size: .85rem;
  font-weight: 300;
  text-decoration: none;
  margin: 0;
}
.footer-col a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid var(--border); }
.footer-bottom-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 1.4rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .75rem;
  color: var(--text3);
}
.footer-bottom-inner a { color: var(--text2); text-decoration: none; }
.footer-bottom-inner a:hover { color: var(--accent); }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .nav-inner { padding: 0 1.25rem; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom-inner { justify-content: center; text-align: center; }
}

/* ── Blindaje contra resets viejos de cada página ───────
   Algunos CSS de página (style.css, etc.) traen reglas tipo
   "a, a:link, a:visited { color: ... }" que por especificidad le
   ganan a una sola clase. Repetimos el color aquí con :link/:visited
   y un ancestro (#nav, .blog-footer, .menu-movil) para que el header
   y el footer siempre se vean igual sin depender del orden de los
   <link> de cada página.
   IMPORTANTE: dentro de :visited se usa el color literal (no var(--x)):
   por privacidad, los navegadores calculan el color "real" pintado de
   un link visitado en un paso aparte donde las variables CSS no siempre
   se resuelven bien — usar var() ahí puede pintar un color por defecto
   (morado/salmón) aunque getComputedStyle diga que está bien. */
#nav .nav-links a:link, #nav .nav-links a:visited { color: var(--text2); }
#nav .nav-links a:hover { color: var(--text); }
#nav .nav-links a.activo:link, #nav .nav-links a.activo:visited { color: var(--accent); }
#nav a.nav-cta:link, #nav a.nav-cta:visited { color: var(--text); }
#nav a.nav-cta:hover { color: var(--accent); }
#nav a.nav-logo-txt:link, #nav a.nav-logo-txt:visited { color: var(--text); }
.menu-movil a:link, .menu-movil a:visited { color: var(--text); }
.menu-movil a:hover { color: var(--accent); }
.menu-movil a.activo:link, .menu-movil a.activo:visited { color: var(--accent); }

/* El boton de accion del pie va oscuro sobre el cian, no blanco. Se repite
   aqui con :link porque la regla de arriba usa esa pseudo-clase y por eso
   pesa mas que la del boton, aunque el boton se declare con dos clases.
   Sin esto quedaba texto casi blanco sobre cian: contraste 1.85, cuando el
   minimo legible es 4.5. Asi sube a 8.6. */
.menu-movil .menu-movil__cta:link,
.menu-movil .menu-movil__cta:visited,
.menu-movil .menu-movil__cta:hover { color: var(--on-accent); }
.blog-footer a.nav-logo-txt:link, .blog-footer a.nav-logo-txt:visited { color: var(--text); }
.blog-footer .footer-social a:link, .blog-footer .footer-social a:visited { color: var(--text2); }
.blog-footer .footer-social a:hover { color: var(--accent); }
.blog-footer .footer-col a:link, .blog-footer .footer-col a:visited { color: var(--text2); }
.blog-footer .footer-col a:hover { color: var(--accent); }
.blog-footer .footer-bottom-inner a:link, .blog-footer .footer-bottom-inner a:visited { color: var(--text2); }
.blog-footer .footer-bottom-inner a:hover { color: var(--accent); }

/* ── Dinamismo tipo jeton.com (igual que en noticias) ──
   1) Animación de entrada al hacer scroll: los elementos con
      data-reveal aparecen (fade + subir) cuando entran en pantalla.
      Sin JS, todo es visible de inmediato (progressive enhancement).
   2) Resplandor que sigue al cursor sobre el hero. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.js [data-reveal].in-view { opacity: 1; transform: none; }

.hero-glow {
  position: absolute;
  width: 460px;
  height: 460px;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0%, transparent 62%);
  filter: blur(60px);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity .5s ease;
  will-change: transform;
}
.video-container:hover .hero-glow { opacity: .9; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
  }
  .hero-glow { display: none; }
}