* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: arial, Arial, Helvetica, sans-serif;
}

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


body {
    --tw-bg-opacity: 1;
    background-color: rgba(17, 24, 39, var(--tw-bg-opacity));
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
}
       
header {
    background: linear-gradient(to bottom, #e53e3e, #111827);
    color: #fff;
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
    padding-left: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    & a {
        padding: 2px; 
        text-transform: uppercase;
        font-size: 24px; 
        letter-spacing: 0.025em; 
    }
}


footer {
    background: linear-gradient(to bottom, #111827, #ef4444);
  text-align: center;
  padding: 1rem;
  margin-top: auto;
}

            

.title-header
{
    color: #e53e3e; font-size: 1.5rem; font-weight: bold;
}

.prelogo
{
    transition: all 0.15s ease-in-out; border: 2px solid rgba(163, 22, 22, 0.5); 
}

.logodef
{
    display: block; transform: translateY(0);
}

.logo2
{
    width: 2rem; height: 2rem;
}


.footer-title
{
    text-align: center; font-size: 0.875rem;
}

.redes
{
    display: flex; justify-content: center; gap: 1rem; margin-top: 0.5rem;
}

.redes > li {
    list-style-type: none;
}

.red-item
{
    color: inherit; font-size: 0.875rem; transition: color 0.15s ease-in-out;
}


.main-frame {
                margin: 0.5rem auto;
                height: auto; 
                width: 91.666667%; 
                max-width: 66.666667%;
}

#embedIframe  {
                width: 100%; 
                aspect-ratio: 16/9;
}

#btnIframe{
                border-width: 0px;
    background-color: #e53e3e; 
    color: white; 
    padding: 0.25rem 0.5rem; 
    border-radius: 0.5rem; 
    
    margin-bottom: 0.5rem; 
    width: 100%; 
    transition: background-color 0.3s;
}

.subiframe
{
    display: flex; flex-direction: column; align-items: center; border-radius: 1rem; width: 100%; margin: 20px auto; margin-bottom: 1rem; padding: 0.25rem; background-color: #e5e7eb;
}

.preframe
{
    border-radius: 0.5rem; position: relative; overflow: hidden; width: 100%;
}

.centerfull
{
    width: 100%; text-align: center;
}

.title
{
    color:#e53e3e; font-size: 1.75rem; font-weight: bold;
}


.margin-top-2
{
    margin-top:2.5rem;
}

@media (max-width: 768px) {
                .main-frame {
                                max-width: 100%;
                }
                #embedIframe  {
                                
                                width: 100%; 
                }
}