/*  Paleta de colores:
        #7469B6
        #AD88C6
        #E1AFD1
        #FFE6E6
*/
:root{
    --color-1: #7469B6;
    --color-2: #AD88C6;
    --color-3: #E1AFD1;
    --color-4: #FFE6E6;
    --color-tarjetas: #b68ec2;
    --size-content: 60%;
}
html,body{
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
}

body{
    display: flex;
    flex-direction: column;
    background-color: #AD88C6;
}

header{
    padding: 10px 0;
    text-align: center;
    align-items: center;
    height: 30px; /* Tamaño fijo */
    background-color: var(--color-1);
}

/* Estilos para el contenedor del iframe */
main {
    flex-grow: 1; /* Hace que el main ocupe el espacio sobrante entre header y footer */
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    background-color: #AD88C6;
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
    
}

#contenido {
    opacity: 1;
    transition: opacity 0.5s ease; /* Fundido de entrada/salida suave */
}

/* Ocultar el contenido inicialmente */
#contenido.hidden {
    opacity: 0;
}

footer {
    text-align: center;
    padding: 0;
    height: 50px; /* Tamaño fijo */
    background-color: var(--color-3);
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

#contenido {
    background-color: var(--color-2);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0; /* Opcional: borde alrededor del iframe */
    box-shadow: 0 8px 12px var(--color-2); /* Sombra para dar un efecto flotante */
}

#pie {
    
}

#izq, #der, #cen{
    display: flex;
    flex-direction: column;
}

#izq, #der {
    width: 10%;
}

#cen {
    width:80%;
}

.carta {
    display: flex;
    
}

.c-enlace {
    padding-left: 1em;
}

 /* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 600px) {

 }

 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {

 }
 
 /* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (min-width: 768px) {

 }
 
 /* Large devices (laptops/desktops, 992px and up) */
 @media only screen and (min-width: 992px) {

 }
 
 /* Extra large devices (large laptops and desktops, 1200px and up) */
 @media only screen and (min-width: 1200px) {
    
 }