/* Variables para los colores de Maxxis */
:root {
    --color-naranja: #FF4713;
    --color-naranja2: #b12105;
    --color-negro: #000000;
    --color-blanco: #FFFFFF;
    --color-gris: #181616;
}
  
body{
  background-color: var(--color-negro);
  text-align: center;
}


/* Centrar el contenedor en el viewport */
.contenedor-imagen {
  /* Ultimo Agregado */
    background-color: var(--color-gris);
    border-radius: 10px;
    padding: 2px;
  /* ---- */
    margin-top: 40px;
    display: flex; /* Activa Flexbox */
    justify-content: center; /* Centra horizontalmente el contenido */
    align-items: center; /* Centra verticalmente el contenido */
    height: 55vh; /* Ocupa toda la altura de la ventana (viewport) */
}

.contenedor-imagen2 {
    margin-top: 2rem;
    /* display: flex;  Activa Flexbox */
    justify-content: center; /* Centra horizontalmente el contenido */
    align-items: center; /* Centra verticalmente el contenido */
    height: 15vh; /* Ocupa toda la altura de la ventana (viewport) */
}

/* Estilos de la imagen */
.img {
    max-width: 100%; /* Evita que la imagen sea más grande que el contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    animation: slideIn 2s forwards; /* Aplica la animación 'slideIn' */
}

.img-whatsapp{
  max-width: 100%; /* Evita que la imagen sea más grande que el contenedor */
  height: auto; /* Mantiene la proporción de la imagen */
  animation: slideOut 2s forwards; /* Aplica la animación 'slideIn' */
}

/* Definición de la animación
   @keyframes crea la secuencia de la animación.
*/
@keyframes slideIn {
    /* Estado inicial */
    from {
        /* Mueve la imagen 100% de su ancho hacia la izquierda (fuera de pantalla) */
        transform: translateX(100vw); 
        opacity: 0; /* Opcional: la hace invisible al inicio */
    }

    /* Estado final */
    to {
        /* Regresa la imagen a su posición original (centrada) */
        transform: translateX(0);
        opacity: 1; /* Opcional: la hace visible al final */
    }
}
@keyframes slideOut {
    /* Estado inicial */
    from {
        /* Mueve la imagen 100% de su ancho hacia la izquierda (fuera de pantalla) */
        transform: translateX(-100vw); 
        opacity: 0; /* Opcional: la hace invisible al inicio */
    }

    /* Estado final */
    to {
        /* Regresa la imagen a su posición original (centrada) */
        transform: translateX(0);
        opacity: 1; /* Opcional: la hace visible al final */
    }
}

.h3{
  font-size: 20px;
  color: var(--color-blanco);
  text-shadow: 2px 3px 4px gray,
                2px 3px 4px var(--color-naranja);
}

footer p{
  text-align: center;
  color: #888;
  border-top: 1px solid var(--color-naranja);
  margin-top: 30px;
  font-family: fantasy;
  padding: 1rem;
  display: flex;
  display: block;
}

.footer-maxxis{
  color: var(--color-naranja);
  font-style: italic;
  font-family: fantasy;
}

.link-liberal{
  color: gray;
  text-decoration: none;
}

.link-liberal:hover{
  color: blue;
}

.icon-whatsapp{
  padding-top: 20px;
  width: 25px;
}