/*
Theme Name: Avada Child
Description: Mastodontik
Author: ThemeFusion
Author URI: Mastodon
Template: Avada
Version: 1.0.0
Text Domain: Avada
*/

/*Menú*/
.awb-menu_desktop.awb-menu_flyout .awb-menu__sub-ul {background-color="white";}

/*Texto doble*/

.textodoble {
max-height: 50px !important;
min-height:50px !important;}

/*Efecto en el texto*/
.fondodestacado {
  padding: 6px !important; /* Añade un espacio alrededor del contenido para darle aire, solo para arriba "top" y abajo "bottom" */
  padding-right: 25px !important;
  padding-left: 25px !important;
  background: linear-gradient(45deg, #FFAA43, #FF8353) !important; /* Fondo degradado en tonos de naranja */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important; /* Sombra suave para resaltar el elemento */
 max-width: fit-content; /*Le añado un ancho que se ajusta al tamaño del elemento, en este caso el texto*/
  animation: colorChange 5s infinite alternate !important; /* Agrega una animación llamada colorChange */
  -moz-animation: colorChange 5s infinite alternate !important; /* Prefijo para Firefox */
}

@keyframes colorChange {
  0% {
    background-position: 0% 50%; /* Empieza con el fondo en una posición */
  }
  100% {
    background-position: 100% 50%; /* Termina con el fondo en otra posición */
  }
}

/*Efecto en el texto central*/

.fondodestacadocentral {
  padding: 6px !important; /* Añade un espacio alrededor del contenido para darle aire, solo para arriba "top" y abajo "bottom" */
  padding-right: 25px !important;
  padding-left: 25px !important;
  background: linear-gradient(45deg, #FFAA43, #FF8353) !important; /* Fondo degradado en tonos de naranja */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important; /* Sombra suave para resaltar el elemento */
  animation: colorChange 5s infinite alternate !important; /* Agrega una animación llamada colorChange */
  -moz-animation: colorChange 5s infinite alternate !important; /* Prefijo para Firefox */
}

/*BTNeffects*/
.boton3d {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  border: 2px solid #000; /* Borde negro */
  position: relative;
  overflow: hidden;
  transition: border 0.3s ease-in-out; /* Transición suave para el borde al hacer hover */
  box-shadow: 3px 3px 0px #ffaa43; /*Le he añadido un sombreado en naranja*/
  max-width: fit-content; /*Con esto hago que mi creación se ajuste a la medida del texto*/
}

.boton3d:hover {
  border-color: #FFA500; /* Cambia el color del borde al naranja al hacer hover */
  box-shadow: 3px 3px 0px black !important; /*Esto me permite cambiar el color de la sombra al ponerme encima con el ratón*/
}

.boton3d::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 50px; /*Le doy más altura para que quede cubierto todo*/
  background: #FFA50040; /* Color de la "sombra" naranja */
  transition: top 0.3s ease-in-out; /* Transición suave para la posición al hacer hover */
}

.boton3d:hover::before {
  top: 0; /* Mueve la "sombra" hacia arriba al hacer hover */
  box-shadow: 3px 3px 0px black; /*Le he añadido un sombreado en naranja*/
}

.marginada {
    margin-right: 2% !important;
    margin-left:2% !important;}


/*Animación con CSS*/

.portada {
    text-align: center;
    padding: 20px;
    background-color: #3498db;
    color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    opacity: 0.9;
    transform: scale(1);
    transition: transform 0.3s, opacity 0.3s;
}

.portada:hover {
    transform: scale(1.1);
    opacity: 1;
}

/* Agrega alguna animación adicional si quieres */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

.portada:hover {
    animation: bounce 0.6s;
}

     .botonera {
            display: inline-block !important;
            padding: 10px 20px !important;
            font-size: 16px !important;
            text-decoration: none !important;
            color: white !important;
            background-color: #f7931e !important;
            border: 2px solid #f7931e !important;
            border-radius: 5px !important;
            transition: background-color 0.5s, color 0.5s, transform 0.5s !important;
            position: relative !important;
            overflow: hidden !important;
        }

        .botonera::before {
            content: "" !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 0 !important;
            height: 100% !important;
            background: #6c2b8e !important;
            z-index: -1 !important;
            transition: width 0.5s !important;
        }

        .botonera:hover {
            color: #6c2b8e !important;
            background-color: transparent !important;
            transform: translateX(-5px) !important;
        }

        .botonera:hover::before {
            width: 100%; !important;
        }

/*Separador de 2 colores*/

.doscolores {
  height: 2px; /* Ajusta la altura del separador según tus necesidades */
  width: 100%;
  background: linear-gradient(to right, #640066, #ffaa43);}

/*.alturafija {
    height: 400px !important;}

Para los titulos/subtitulos del blog
.destacartitulo {*/

/*Así lo veo perfecto en mi móvil*/

/*Para el ejercicio de la tarjeta*/
.container {
    width: 200px;
    height: 200px;
    perspective: 1000px; /* Profundidad de la perspectiva */
}

.card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s;
}

.card:hover {
    transform: rotateY(180deg);
}

.front, .back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden; /* Oculta la cara posterior */
}

.front {
    transform: rotateY(0deg);
}

.back {
    transform: rotateY(180deg);
}

img {
    width: 100%;
    height: 100%;
}

/*Para el ejercicio del reloj*/
div#reloj {
    text-align: center;
    background-color: #640066;
    max-width: 150px !important;
    padding: 25px;
    color: #fea621;
    font-size: 25px;
    border-radius:25px;
}

@media only screen (max-width: 800px) and (min-width: 280px) {

.H1movil {
  font-size: 35px !important;
}
.fusion-title h1 {
    font-size: 35px !important;
    text-align: center !important;
}

.fusion-title h2 {
    font-size: 28px !important;
    text-align: center !important;
}

.fusion-title h5 {
    font-size: 21px !important;
    text-align: center !important;
}

.textofooter {
font-size:12px !important;    
    
}

}

/*Móvil*/
@media only screen and (min-width:320px) and (max-width: 680px) {
  .H1movil {
    font-size: 30px !important;}

  h1 {font-size: 30px !important;}  
  h2 {
  font-size: 26px !important;}
 
.fusion-title h1 {
  font-size: 30px !important;
  text-align: center !important;}
 
.textofooter {
  font-size:14px !important;
  }
  
.textofooter p {
  font-size:14px !important;
  }

h5 {
  font-size: 25px !important;
  margin-bottom: 10px !important;
  color: #640066 !important;}
  
}