/* ========================
   RESET / LO BÁSICO
   ======================== */
* {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;           /* ya no hay padding-bottom aquí */
  max-width: 100vw;
  overflow-x: hidden;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  background-color: #000;
  color: #fff;
  /* padding-bottom: 110px;  <-- esto debe comentarse o quitarse */
}


body.oculto {
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.4s ease-in-out;
}


/* ========================
   HEADER (logo, menú, marquesina)
   ======================== */
.logo {
  max-height: 60px;
  width: auto;
  display: block;
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px !important;
}

.header-top .subtitulo {
  font-size: 18px;
  color: #fff;
}

#marquesina-monedas {
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 12px;
  margin: 10px auto;
  max-width: 900px;
  color: #fff;
  border-radius: 10px;
  font-size: 15px;
}

marquee {
  font-family: "Segoe UI Emoji", "Noto Color Emoji", 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
}

nav.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.95);
  padding: 12px 0;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  overflow-x: auto;
}

nav.main-nav a {
  color: #fff;
  text-decoration: none;
  margin: 0 30px;
  font-weight: bold;
  font-size: 18px;
  white-space: nowrap;
}

nav.main-nav a:hover {
  color: #FFD700;
  text-decoration: underline;
}

/* Menú hamburguesa en móvil */
.menu-toggle {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100%;
  background: #111;
  color: white;
  text-align: center;
  padding: 14px;
  font-size: 18px;
  display: none;
  cursor: pointer;
}

.menu-mobile {
  display: none;
  background: #111;
  list-style: none;
  padding: 10px;
  margin: 0;
  position: absolute;
  top: 54px; /* Debajo de la hamburguesa */
  left: 0;
  width: 100%;
  z-index: 10000;
}

.menu-mobile li + li {
  margin-top: 8px;
}

.menu-mobile a {
  color: #fff;
  text-decoration: none;
}

@media (max-width: 768px) {
  nav.main-nav {
    display: none !important;
  }
  .menu-toggle {
    display: block !important;
  }
}


/* ========================
   PANEL SUPERIOR DE NAVEGACIÓN (currency-nav)
   ======================== */
.currency-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 80px auto 20px; /* 80px para que el menú fijo no lo oculte */
  padding: 0 10px;
  z-index: 5000;
}

.currency-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  text-decoration: none;
  padding: 8px 12px;
  border: 2px solid #75AADB; /* Celeste bandera */
  border-radius: 6px;
  font-size: 16px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.currency-btn .flag {
  font-size: 18px; /* Para que la bandera (emoji) destaque un poco */
}

.currency-btn i {
  font-size: 18px;
}

.currency-btn .label {
  font-weight: bold;
  font-size: 14px;
}

.currency-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #FFD700;
  border-color: #FFD700;
}


/* ========================
   GRID DE COTIZACIONES
   (recuperando aspecto original de tus boxes)
   ======================== */
.grid {
  display: grid !important;
  grid-template-columns: repeat(4, auto) !important;
  gap: 20px !important;
  margin: 20px auto;
  justify-content: center;
  padding: 0;
}

.box {
  width: 230px !important;
  max-width: 230px !important;
  background: #111;            /* Fondo oscuro sólido */
  border: 1px solid #333;      /* Borde gris oscuro */
  border-radius: 8px;          /* Bordes redondeados de 8px */
  padding: 20px;               /* Mismo padding que tenías antes */
  text-align: center;
  color: #fff;
  position: relative;
  transition: border 0.2s, background 0.2s;
}

.box:hover {
  border-color: #75AADB;       /* Borde celeste al hover */
  background: #1a1a1a;         /* Ligero aclarado al pasar el mouse */
}

.variacion {
  position: absolute;
  top: 12px;             /* la distancia vertical desde la parte superior del box */
  left: 50%;             /* lo mueve al centro horizontal del box */
  transform: translateX(-50%); /* lo “rebaja” la mitad de su propio ancho para quedar perfectamente centrado */
  font-size: 14px;
  color: #75AADB;
  display: flex;
  align-items: center;
  gap: 4px;
}

.timestamp {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}

.box h2 {
  font-size: 16px;
  margin: 24px 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.box p {
  font-size: 17px;
  margin: 4px 0;
}

.box-actions {
  display: flex;
  justify-content: center; /* o flex-start si quieres que queden pegados al borde izquierdo */
  gap: 0;                   /* cero píxeles entre cada ícono */
  background: rgba(0, 0, 0, 0.2);
  padding: 8px;
  border-radius: 6px;
  margin-top: 12px;
}

.box-actions .action i,
.box-actions .action svg {
  stroke: #75AADB !important; /* Celeste bandera */
  width: 20px;
  height: 20px;
}

.box-actions .action:hover {
  background: #444;
}

.box-actions .action:hover i,
.box-actions .action:hover svg {
  stroke: #ffffff !important;
}


/* ========================
   FOOTER CON ENLACES DE CONTACTO
   (estilo original: texto en blanco, centrado, sin subrayado)
   ======================== */
.footer-links {
  margin: 30px 0 20px;
  text-align: center;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
  margin: 0 12px;
  font-size: 14px;
  font-weight: 500;
}

.footer-links a:hover {
  text-decoration: underline;
  color: #FFD700;
}


/* ========================
   SECCIÓN NAV (fotitos de artículos)
   ======================== */
.section-nav-wrapper {
  padding: 1.5rem 0;
  background-color: transparent;
  text-align: center;
  overflow-x: auto;
  margin-top: 20px;
}

.section-nav-grid {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 1rem;
  overflow-x: auto;
  padding: 0 1rem;
}

.mini-img {
  width: 158px !important;
  height: 158px !important;
  object-fit: cover !important;
  border: 2px solid #00aaff;
  border-radius: 6px;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.mini-img:hover {
  opacity: 0.85 !important;
}


/* ========================
   ÍCONOS LUCIDE / VARIACIONES %
   ======================== */
.porcentaje {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.4s ease;
}

.porcentaje.mostrar {
  opacity: 1;
  transform: translateY(0);
}

.porcentaje.positivo {
  color: #00ff66 !important;
}

.porcentaje.negativo {
  color: #ff4c4c !important;
}

.porcentaje.neutral {
  color: #888888 !important;
}

.icono-variacion svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-left: 4px !important;
}


/* ========================
   AJUSTES RESPONSIVOS (Mobile)
   ======================== */
@media (max-width: 480px) {
  /* Ajuste panel de monedas en móvil */
  .currency-nav {
    margin: 100px auto 12px; /* Mover más arriba */
    gap: 8px;
  }
  .currency-btn {
    font-size: 14px;
    padding: 6px 8px;
  }
  .currency-btn .label {
    font-size: 12px;
  }

  /* Grid 2 columnas en móvil */
  .grid {
    grid-template-columns: repeat(2, auto) !important;
    gap: 12px !important;
  }
  .box {
    width: 140px !important;
    max-width: 140px !important;
  }
  .box h2 {
    font-size: 14px;
  }
  .box p {
    font-size: 12px;
  }

  /* Menú principal en móvil */
  nav.main-nav a {
    margin: 0 12px;
    font-size: 14px;
  }

  /* Ajustes para la franja de enlaces en móvil */
  .footer-links a {
    margin: 0 8px;
    font-size: 14px;
  }
}


/* ========================
   ICONOS DENTRO DE currency-btn
   ======================== */
.currency-btn i {
  font-size: 18px;
  margin-right: 4px;
  stroke: #75AADB !important;
}


/* ========================
   FRANJA FIJA AL FONDO DE LA VENTANA (ultra-delgada)
   ======================== */
.footer-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background-color: #111 !important;
  padding: 1px 0 !important;           /* Solo 1px arriba y abajo */
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.3) !important;
  z-index: 999 !important;
}

/* Solo en el contenedor .site-content, dejamos espacio para la franja. */
.site-content {
  padding-bottom: 20px;
}

.footer-links {
  text-align: center !important;
}

/* Ahora la caja que agrupa los enlaces ↓↓↓ */
.footer-links {
  margin: 2px 0 !important;         /* Solo 2px arriba y abajo, en lugar de 30px 0 20px */
  text-align: center !important;
}

/* Ajusta aquí el estilo de los enlaces: */
.footer-links a {
  color: #fff !important;
  text-decoration: none !important;
  margin: 0 12px !important;        /* Separación horizontal entre textos */
  font-size: 14px !important;       /* Fuente un poco más pequeña ayuda a que la barra sea menos alta */
  font-weight: 500 !important;
  line-height: 1 !important;
  transition: color 0.2s !important;
}


/* Ajustes en móvil para que los enlaces queden cómodos */
@media (max-width: 480px) {
  .footer-links a {
    margin: 0 8px;
    font-size: 14px;
  }
}

.box {
  transition: all 0.4s ease;
}

.box.oculto {
  display: none !important;   /* fuera del árbol ⇒ jamás se ve un frame */
}


.box.visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  position: relative;
  z-index: 1;
}


.skeleton{
  background: linear-gradient(90deg,#1a1a1a 25%,#333 50%,#1a1a1a 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer{100%{background-position:-200% 0}}



/* ═══ BOTONES DEL <nav class="data-nave"> ════════════════════════ */
.data-nave{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin:20px auto 10px;
}

/* todos los estados del enlace: link, visitado, hover, activo, foco */
.data-nave .data-btn,
.data-nave .data-btn:link,
.data-nave .data-btn:visited,
.data-nave .data-btn:hover,
.data-nave .data-btn:active,
.data-nave .data-btn:focus{
  background:#111;            /* fondo oscuro */
  color:#ccc !important;      /* texto gris, forzado */
  border:2px solid #75AADB;   /* celeste bandera */
  border-radius:6px;
  padding:7px 14px;
  font-size:15px;
  font-weight:600;
  text-decoration:none !important;
  line-height:1;
  transition:background .15s,color .15s,transform .15s;
}

/* efecto al pasar el mouse o al recibir foco */
.data-nave .data-btn:hover,
.data-nave .data-btn:focus{
  background:#75AADB;   /* fondo celeste */
  color:#000 !important;/* texto negro para contraste */
  transform:translateY(-1px);
}

/* botón de la página actual */
.data-nave .data-btn.active{
  background:#75AADB;
  color:#000 !important;
  border-color:#FFD700;  /* dorado */
  cursor:default;
}

/* versión móvil */
@media (max-width:480px){
  .data-nave{ gap:8px; padding:0 10px; }
  .data-nave .data-btn{
    font-size:14px;
    flex:1 1 auto;
    text-align:center;
  }
}


/* ---- gráfico histórico del dólar ---- */
#wrapGraficoDolar{
  width: 90%;          /* mismo ancho que la tabla */
  max-width: 600px;    /* límite “compacto”        */
  margin: 25px auto;
}
#graficoDolar{          /* el propio canvas */
  height: 250px;        /* igual que el de inflación */
}


/* style.css de tu child-theme (o en Apariencia ▸ Personalizar ▸ CSS adicional) */

/* Animación “latido” */
@keyframes pulseZoom {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.1); }
}

/* Encabezado H1 más pequeño y animado */
h1.subtitulo{
  font-size: 1.5rem;          /* ↓ Cambia este valor a tu gusto:
                                 1.4rem ≈ 22 px, 1.6rem ≈ 25 px … */
  animation: pulseZoom 3s ease-in-out infinite;
  font-weight: 600;           /* o el que uses habitualmente */
  margin: 0 0 1rem;
}

/* (Opcional) Aún más chico en pantallas pequeñas */
@media (max-width: 600px){
  h1.subtitulo{ font-size: 1.05rem; } /* ~20 px */
}