/* Configuración General */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #e8f6ff;
    color: black;
    overflow-x: hidden;
    padding-top: 112px; /* Evita que la barra fija tape el contenido */
}

p.a {font-style: italic; font-family: Georgia, Arial; font-size: xx-large; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0;}
p.b {font-style: italic; font-family: Georgia, Arial; font-size: x-large; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0;}
p.c {font-style: italic; font-family: Georgia, Arial; font-size: large; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0;}
p.d {font-style: italic; font-family: Georgia, Arial; font-size: small; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0;}
p.e {font-style: italic; font-family: Georgia, Arial; font-size: xx-small; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0;}

#main-header {
    background-image: url('Imagenes/Cielo.jpg'); */
    background-size: cover;       /* Ajusta la imagen para cubrir toda la celda */
    display: flex;
    width: 100vw;
    height: 112px; /* Altura de la cabecera */
    position: fixed; /* Fija la cabecera a la ventana */
    margin: 0;
    top: 0; /* La alinea en la parte superior */
    left: 0; /* La alinea a la izquierda */
    z-index: 100; /* Asegura que esté por encima de otros contenidos */
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid #808080;
    }

.contenedor-imagen-WA {
    background-color: #25D366; /* El color que deseas detrás de la imagen */
    display: inline-block;     /* Ajusta el contenedor al tamaño de la imagen */
    padding: 1px;             /* Opcional: espacio de color alrededor de la imagen */
    border-radius: 20px;        /* Opcional: bordes redondeados */
}

.contenedor-imagen-mail {
    background-color: skyblue; /* El color que deseas detrás de la imagen */
    display: inline-block;     /* Ajusta el contenedor al tamaño de la imagen */
    padding: 1px;             /* Opcional: espacio de color alrededor de la imagen */
    border-radius: 20px;        /* Opcional: bordes redondeados */
}

/* Contenedor de las Franjas */
.contenedor-franjas {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
}

/* Estructura de cada Franja */
.franja {
    width: 100%;
    overflow: hidden;
    /* background-color: #79c7ff;*/
    background-color: #d3d3d3;
    padding: 10px 0;
    display: flex;
}

.carrusel-track {
    display: flex;
    gap: 15px;
    width: max-content;
}

.carrusel-track img {
    width: 300px;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

/* Animaciones de Desplazamiento */
.f-derecha-izquierda .carrusel-track {
    animation: moverIzquierda 50s linear infinite;
}

.f-izquierda-derecha .carrusel-track {
    animation: moverDerecha 50s linear infinite;
}

/* Pausar movimiento al pasar el mouse por encima */
.franja:hover .carrusel-track {
    animation-play-state: paused;
}

/* Keyframes para los movimientos (asumiendo 50% de traslación para el bucle infinito) */
@keyframes moverIzquierda {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes moverDerecha {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}