marquee {
	margin: 0;
	padding: 0;
	border: 0;
/*	font-size: 100%;*/
	font: inherit;
	vertical-align: baseline;
}

/* Importar fuente de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* Estilos CSS Mejorados */
body {
    font-family: 'Inter', sans-serif; /* Usamos la fuente importada */
    font-weight: bold;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #eef2f7; /* Un fondo azul muy suave */
    color: #333; /* Color de texto principal más oscuro */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden; /* Evitar scroll horizontal */
}

header {
    background-color: #004080; /* Azul institucional más profundo */
    color: #ffffff;
    padding: 20px 20px; /* Más espacio en el header */
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); /* Sombra ligeramente más pronunciada */
    margin-bottom: 25px; /* Espacio debajo del header */
}

header div {
    max-width: 800px; /* Limitar ancho del contenido del header si es necesario */
    margin: 0 auto;
    font-size: 1.5em; /* Tamaño de fuente para el título en header */
    font-weight: 600; /* Semi-negrita */
}

/* Estilos para el Contenedor Principal mejorado */
.container {
    width: 95%; /* Usar un poco más de ancho en pantallas grandes */
    max-width: 800px; /* Aumentar el ancho máximo */
    background-color: #ffffff;
    padding: 30px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Sombra más suave y extendida */
    border-radius: 10px; /* Bordes más redondeados */
    margin: 0 auto 30px auto; /* Centrado y margen inferior */
    flex-grow: 1;
    box-sizing: border-box;
}

h1 {
    color: #0056b3; /* Mantener el azul para el título principal */
    text-align: center;
    margin-bottom: 30px; /* Más espacio debajo del título principal */
    font-size: 2.2em; /* Tamaño de título principal ligeramente más grande */
    font-weight: 700; /* Negrita */
}

h2 {
    color: #007bff; /* Azul brillante para subtítulos */
    margin-top: 30px; /* Más espacio arriba de los subtítulos */
    margin-bottom: 15px;
    font-size: 1.8em; /* Tamaño de subtítulo ligeramente más grande */
    border-bottom: 2px solid #dee2e6; /* Línea separadora más clara */
    padding-bottom: 10px; /* Más espacio debajo de la línea */
    font-weight: 600; /* Semi-negrita */
}

h3 {
    color: #495057; /* Gris oscuro para h3 */
    margin-top: 25px;
    margin-bottom: 15px;
    font-size: 1.4em;
    font-weight: 600;
}


section {
    margin-bottom: 30px; /* Más espacio entre secciones */
}

section:last-child {
    margin-bottom: 0;
}

p {
    margin-bottom: 18px; /* Más espacio entre párrafos */
    text-align: justify;
    color: #555; /* Color de párrafo ligeramente más claro */
}

p:last-child {
    margin-bottom: 0;
}

.factor-item {
    background-color: #e9f7ef; /* Fondo verde/azul muy suave */
    padding: 20px; /* Más padding */
    margin-bottom: 20px; /* Más espacio entre items */
    border-left: 5px solid #28a745; /* Borde verde más pronunciado */
    border-radius: 8px; /* Bordes redondeados */
    transition: transform 0.2s ease-in-out; /* Pequeña transición al pasar el ratón */
}

.factor-item:hover {
    transform: translateY(-5px); /* Efecto sutil al pasar el ratón */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra al pasar el ratón */
}


.factor-item strong {
    display: block;
    margin-bottom: 8px; /* Más espacio debajo del strong */
    color: #0056b3; /* Azul para el strong */
    font-size: 1.2em; /* Tamaño de fuente ligeramente más grande */
    font-weight: 700;
}

.contiene-panel {
  position: relative;
  width: 100%;
  height: 400px; /* o lo que necesites */
  overflow: hidden;
}

.contiene {
    z-index:1;
}

.panel {
  position: absolute;
  /*top: 0;
  left: 0;
  width: 100%;
  height: 100%;*/
  height: 360px;
  width: 100%;
  /*justify-content: space-between;*/ /*OTROS*/
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  /*display: flex;*/
  align-items: center;
  justify-content: center;
/*  font-size: 48px;*/
  color: white;
  z-index: 10;
  display: none;
}

.panel.visible {
  display: block;
}
.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Estilos para el Footer mejorado */
footer {
    background-color: #343a40;
    color: #e9ecef; /* Texto ligeramente más claro en el footer */
    padding: 20px 20px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    margin-top: 30px; /* Espacio arriba del footer */
    font-size: 0.9em; /* Tamaño de fuente ligeramente más pequeño */
}

footer p {
    margin-bottom: 10px; /* Menos espacio entre párrafos en el footer */
    color: #ced4da; /* Color de párrafo más claro en el footer */
}

footer p:last-child {
    margin-bottom: 0;
}
/* Responsividad mejorada */
@media (max-width: 768px) { /* Ajustes para tablets y móviles */
    .container {
        padding: 20px;
        margin: 15px auto;
    }

    h1 {
        font-size: 1.8em;
        margin-bottom: 20px;
    }

    h2 {
        font-size: 1.5em;
        margin-top: 20px;
    }

     h3 {
        font-size: 1.2em;
        margin-top: 20px;
    }

    header, footer {
         padding: 15px 15px;
    }

    .factor-item {
        padding: 15px;
    }
}

@media (max-width: 480px) { /* Ajustes para móviles pequeños */
    .container {
        padding: 15px;
        margin: 10px auto;
    }

    h1 {
        font-size: 1.5em;
        margin-bottom: 15px;
    }

    h2 {
        font-size: 1.3em;
        margin-top: 15px;
    }

     h3 {
        font-size: 1.1em;
        margin-top: 15px;
    }

    header, footer {
         padding: 10px 10px;
         font-size: 0.8em;
    }

    header div {
        font-size: 1.2em;
    }

    p {
        margin-bottom: 15px;
    }

    .factor-item {
        padding: 10px;
        margin-bottom: 15px;
    }

    .factor-item strong {
        font-size: 1.1em;
        margin-bottom: 5px;
    }
}

.tradingview-widget-container {
  height: 600px; /* Ajusta la altura según tus preferencias */
}

main {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.contiene {
    /*display: grid;*/
    width:100%;
}

.noVisible {
    visibility: hidden;
}

img {
    width:100px;
}

/*TABLA*/
table {
    font-weight: bold;
    width: 100%;
    border-collapse: collapse;
}

.pct90 {
    width:90%;
    margin: 0 auto;
}

main table {
    margin-top: 15px;
    margin-bottom: 0px;
    margin-left: 15px;
    margin-right: 15px;
     margin: 15px 15px;
}

main table td{
     padding: 5px;
}

th, td {
    border-bottom: 1px solid #ddd;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-style:dotted;
    text-align: center;
}

th {
    /*background-color: #007bff;*/
    color: #007bff;
}

th:nth-child(1), th:nth-child(3) {
    width: 13%;
}

.sinImportancia {
    color: #cdcdcd;
    font-weight: bold;
}

/*TRANSICIONES*/
#contenido-dinamico.fade-in {
    opacity: 1;
}

.fade {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 2s ease-in-out, transform 2s ease-in-out;
}

.fade-out {
  opacity: 0;
  transform: translateX(-150px); /* Se desliza hacia la izquierda al desaparecer */
}

.fade-in {
  opacity: 1;
  transform: translateX(0); /* Vuelve a su posición original al aparecer */
}

        .fade-in-panel {
          animation: fadeIn 1s ease-in forwards;
        }
        
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(20px); }
          to { opacity: 1; transform: translateY(0); }
        }
        
        /* 🔁 Transición de salida */
        .fade-out-panel {
          animation: fadeOut 0.5s ease-out forwards;
        }
        
        @keyframes fadeOut {
          from { opacity: 1; transform: translateY(0); }
          to { opacity: 0; transform: translateY(-20px); }
        }
        
        /* 🖼️ Transición entre paneles */
        .panel-transition {
          animation: panelSwap 1s ease-in-out forwards;
        }
        
        @keyframes panelSwap {
          0% { opacity: 0; transform: scale(0.95); }
          100% { opacity: 1; transform: scale(1); }
        }