* { margin: 0px;padding: 0px; outline: 0;}
html, body {width: 100%;height:100%;}

.fondoblanco
{
  transition: all 0.9s;
  -moz-transition: all 0.9s;
  -webkit-transition: all 0.9s;
  -o-transition: all 0.9s;
  -ms-transition: all 0.9s;
}

.fondoblanco:hover
{
  background:rgba(255,255,255,0.5);
  cursor:pointer;
  transition: all 0.9s;
  -moz-transition: all 0.9s;
  -webkit-transition: all 0.9s;
  -o-transition: all 0.9s;
  -ms-transition: all 0.9s;
}

.navbar
 {
            display: flex;
            align-items: center;
            justify-content: flex-end;
 }

.menu-item 
  {
            color: rgb (214,25.10);
            font-size: 18px;
            font-weight: 700;
            margin-left: 20px;
            display: inline-block;
            text-decoration: none;
            cursor:pointer;
  }

        /* Menú hamburguesa - solo visible en móvil */
.menu-toggle
 {
            display: none;
            font-size: 30px;
            color: white;
            cursor: pointer;
 }

        /* Contenedor del menú desplegable */
.menu
  {
            display: flex;
            flex-wrap: wrap;
  }


.top
{
    margin-bottom:40px;    
}

.direccion
{
  display:none;
}



.menu-item2 
  {
            color: #fff;
            font-size: 17px;
            font-weight: 600;
            margin-left: 20px;
  }

.menu-item2:hover
{
            background:rgba(255,255,255,0.5);
            cursor:pointer;
}

.submenu
{
  display:none;
}


.red-metallic 
  {
     background: linear-gradient(45deg, 
     #FFFFFF,   /* rojo oscuro */
     #E00A16,   /* rojo fuego */
     #ff9999,   /* rojo claro, para el brillo */
     #E00A16,   /* rojo fuego */
     #FFFFFF    /* rojo oscuro */
            );
     background-size: 200% 200%; /* Tamaño del fondo para mejor efecto */
     animation: shine 10s infinite linear; /* Efecto de brillo suave */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }





@keyframes shine 
     {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
     }




.blue-metallic
 {
    background:linear-gradient(45deg, rgba(32,226,234,0.6195728291316527) 23%, rgba(233,110,135,0.5215336134453781) 50%,rgba(233,110,135,0.5215336134453781) 70%, rgba(220,20,60,1) 90%);

    background-size: 200% 200%; /* Tamaño del fondo para mejor efecto */
    animation: shineb 6s infinite linear; /* Efecto de brillo suave */

}

@keyframes shineb 
     {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
     }




.move
{
  transition: all 0.9s;
  -moz-transition: all 0.9s;
  -webkit-transition: all 0.9s;
  -o-transition: all 0.9s;
  -ms-transition: all 0.9s;
}


.blanco
{
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  background:rgb(255,255,255);
}

.negro
{
  background:transparent;
}


.f1
 {
    font-family: "Hammersmith One", sans-serif;
    font-weight: 400;
    font-style: normal;
 }


.f2
 {
   font-family: "Hammersmith One", sans-serif;
   font-optical-sizing: auto;
   font-weight: <weight>;
   font-style: normal;
 }


.f3
 {
   font-family: "Barlow Semi Condensed", sans-serif;
   font-style: normal;
 }


.opcion
{
   color:rgb(255,255,255);
   font-size:18px;
   padding:10px;
}

.opcion:hover
{
   background:rgba(0,0,0,0.8);
   color:white;
   cursor:pointer;
}

.titulo
{
   color:rgb(203,31,39);
   font-size:40px;
   font-family: "Source Sans Pro", sans-serif;
   font-weight:700;
}


.zoom 
{
  transition: transform .2s; /* Animation */
  //transform: scale(1);
  width:auto;height:240px;
}

.zoom:hover 
{
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  width:auto;height:240px;
}


.avisos
{
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    border: 0;
    outline: 0;
    -webkit-font-smoothing: antialiased;
    -ms-word-wrap: break-word;
    word-wrap: break-word;


    font-family: "Hind", sans-serif;
    font-size: 21px;
    line-height: 1.53em;
    font-weight: 400;
}


.direcciones
{
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    border: 0;
    outline: 0;
    -webkit-font-smoothing: antialiased;
    -ms-word-wrap: break-word;
    word-wrap: break-word;


    font-family: "Hind", sans-serif;
    line-height: 1.53em;
    font-weight: 400;
}


.reflejo {
  background: linear-gradient(130deg, rgba(255, 0, 0, 0) 45%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 0, 0, 0) 55%);
  background-size: 300% 300%;
  animation: reflejoMovimiento 3s ease-in-out;
}

@keyframes reflejoMovimiento {
  0% {
    background-position: -150% -150%;
  }
  100% {
    background-position: 150% 150%;
  }
}


.cuadro
 {
    width: 30%;               /* 30% del ancho del contenedor */
    padding-bottom: 30%;      /* Esto establece un alto de 30% en relación al ancho */
    position: relative;       /* Necesario para que el padding-bottom funcione correctamente */
    transform-style: preserve-3d; /* Asegura que los elementos hijos se rendericen en 3D */
    transform: rotateY(0); /* Inicia sin rotación */
    transition: transform 1s; /* Transición suave */
 }

.cuadro:hover 
{
  transform: rotateY(180deg); /* Rota 180 grados en el eje Y al hacer hover */
}


.box
{
   float:left;
   width:30%;
   margin-left:3%;
   position:relative;
   transform-style: preserve-3d; /* Asegura que los elementos hijos se rendericen en 3D */
   transform: rotateY(0); /* Inicia sin rotación */
   transition: transform 1s; /* Transición suave */
}

.box:hover 
{
  transform: rotateY(180deg); /* Rota 180 grados en el eje Y al hacer hover */
}


.frente, .dorso 
{
  width: 100%;
  backface-visibility: hidden; /* Evita que se vea el reverso de la carta cuando está volteada */
}

.frente
{

   color: white;
   font-size: 20px;
   border-radius:10px;
}
 
.dorso 
{
   position:absolute;
   top:0px;
   left:0px;
   background-color: blue;
   color: white;
   font-size: 20px;
   transform: rotateY(180deg); /* Rota la parte trasera para que quede oculta al inicio */
   border-radius:10px;
}

.seccion1
{
  display:block;
}


.tituloseccion
  {
      width:50%;
  }

.circulo
{
   width:23%;
   display:inline-block;
   vertical-align:top;
   
}

.bajo
 {
   width:21%;
   display:inline-block;
 }

        /* Estilos para móviles: mostrar el ícono y ocultar el menú */
@media screen and (max-width: 768px) 
  {
    .menu 
      {
                display: none; /* Ocultar el menú en móvil */
                flex-direction: column;
                width: 100%;
                background-color: #333;
                position: absolute;
                top: 50px;
                left: 0;
       }

     .menu-toggle 
       {
                display: block; /* Mostrar el ícono en móvil */
       }

     .menu-item 
       {

                color: white;
                cursor:pointer;
        }

     .top
        {
           display:none;
        }

     .direccion
        {
           display:block;
           font-size:13px;
           font-family: "Barlow Semi Condensed", sans-serif;
           font-style: normal;
           color:rgb(255,255,255);
           margin-bottom:20px;
        }

    .seccion1 
       {
          display:none;
       }

    .box
      {
         float:left;
         width:100%;
         position:relative;
         transform-style: preserve-3d; /* Asegura que los elementos hijos se rendericen en 3D */
         transform: rotateY(0); /* Inicia sin rotación */
         transition: transform 1s; /* Transición suave */
         margin-bottom:20px;
      }

    .tituloseccion
      {
         width:100%;
      }

   .circulo
     {
       width:80%;
       display:inline-block;
       vertical-align:top;
       margin-bottom:30px;
     }

   .bajo
    {
       width:80%;
       margin-bottom:50px;
    }
  }