/* Estilos del logotipo */
#cuadro-modal{
  position: absolute;
  top: 50%;
  left: 65%;
  transform: translate(-100%, -100%);
}

#button_suscripcion{
    background: #ff8000;
    color: #000000;
}

#button_entradas{
    background: #ff8000;
    color: #000000;
}

#categorias{
    color: #ff8000;
}

.manual-container {
    background: #fff;
    padding: 2em;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    font-size: 1.05rem;
    line-height: 1.7;
    text-align: justify;  /* alinea el texto */
    color: #333;
}

/* Estilo para títulos dentro del manual */
.manual-container h1,
.manual-container h2,
.manual-container h3 {
    color: #003366;
    margin-top: 1.2em;
    margin-bottom: 0.6em;
    font-weight: bold;
}

/* Listas */
.manual-container ul,
.manual-container ol {
    margin-left: 1.5em;
    padding-left: 0.5em;
}

.manual-container li {
    margin-bottom: 0.5em;
}

/* Párrafos */
.manual-container p {
    margin-bottom: 1em;
}

/* === ESTILO DE TARJETAS DE APLICACIONES === */
.card {
  cursor: pointer; /* Muestra la mano al pasar el ratón */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* === BANNER / ORBIT === */
/* Ocultar solo en móviles reales < 640px */
@media screen and (max-width: 639px) {
    .orbit { display: none; }
}

/* Mostrar banner desde 640px en adelante (tablet, portátil, desktop) */
@media screen and (min-width: 640px) {
    .orbit { display: block; }
}

/* === MENÚ BLOG === */
/* Submenú oculto por defecto */
.top-bar-left ul.dropdown.menu li ul.menu {
    display: none;
    position: absolute;
    background: #000;
    z-index: 9999;
}

/* Submenú visible al hover desde 640px en adelante */
@media screen and (min-width: 640px) {
    .top-bar-left ul.dropdown.menu li:hover > ul.menu {
        display: block;
    }
}

/* Asegura que el top-bar tenga altura suficiente para hover */
.top-bar-left {
    min-height: 50px;
    position: relative;
}
