@charset "utf-8";
/* CSS Document */

/* styles.css */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Previene desbordamiento horizontal */
   
   
}

/* Estilos para la cabecera */
.header {
    width: 100%;
    background-color: #000;
    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    padding: 1px 10px;
}

/* Estilos para la imagen del logo */
.logo-img {
    max-height: 150px; /* Ajusta la altura máxima según sea necesario */
    width: auto; /* Mantener la proporción del logo */
    max-width: 100%; /* Asegura que el logo no exceda el ancho del contenedor */
    
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .logo-img {
        max-height: 100px; /* Ajusta la altura máxima para pantallas pequeñas */
    }
}


/*  redes cabecera */

   .redescabecera  {
       
       text-align: right;
       max-height: 60px;
       padding: 10px 30px 0px 10px;
   }
   
   .redescabecera img {
       
       text-align: center;
       max-height: 30px;
   }
   
  
   
  
   
   

/* ------------------------------*/

/* Estilo principal para los botones */
.button-container {
  display: flex;
  flex-wrap: wrap; /* Permite que los botones se envuelvan */
  gap: 15px; /* Espacio entre botones */
  justify-content: center; /* Centra los botones en la fila */
}

/* Botones individuales */
.button-container a {
  display: block; /* Asegura que sean elementos de bloque */
  padding: 15px 20px; /* Espaciado interno */
  font-size: 16px;
  color: #ffe701;
  
  background: linear-gradient(#101388, #101388, #101388, #101388, #101388, #ffe701);
  border: 2px solid white;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  min-width: 280px; /* Ancho mínimo */
  max-width: 300px; /* Ancho máximo */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover en botones */
.button-container a:hover {
  background: #ffe701;
  color: black;
}

/* Media query para pantallas pequeñas */
@media (max-width: 600px) {
  .button-container {
    flex-direction: column; /* Cambia a disposición en columna */
    align-items: center; /* Centra los botones en columna */
  }

  .button-container a {
    width: 100%; /* Asegura que ocupen todo el ancho disponible */
    max-width: none; /* Elimina el ancho máximo */
    margin: 10px 0; /* Espacio vertical entre botones */
  }
}


/* Botones individuales */
   
    .tres {
      animation-duration: 3s;
      animation-name: slidein;
      text-align: center; 
      font-size: 24px;
      margin-bottom: 20px; /* Espacio entre el título y los botones */
      margin-top: 20px;
      padding: 30px;
    }
    
    @keyframes slidein {
    from {
    margin-left: 100%;
    width: 300%;
      }

   to {
    margin-left: 0%;
    width: 100%;
      }
    }
    
    
   h3 {
      font-size: 24px;
      margin-bottom: 20px; /* Espacio entre el título y los botones */
      margin-top: 20px;
      padding: 30px;
      
    } 
    
    h4 {
      font-size: 20px;
      margin-bottom: 20px; /* Espacio entre el título y los botones */
      margin-top: 20px;
      padding: 30px;
      
    } 
    
    .contenedortexto {
     text-align: center;  
    }
 
 
 /*  boton sorteo x mil */
 
  .mil {
      
      text-align: center; 
      font-size: 24px;
      margin-bottom: 20px; /* Espacio entre el título y los botones */
      margin-top: 20px;
      padding: 30px;
    }
 
 .myButton {
	box-shadow:inset 0px 1px 0px 0px #fff6af;
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	background-color:#ffec64;
	border-radius:2px;
	border:1px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:17px 76px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffee66;
}
.myButton:hover {
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	background-color:#ffab23;
}
.myButton:active {
	position:relative;
	top:1px;
}

 
    
   .linea-superior {
  height: 1px; /* Establece el alto de la línea en 1 píxel */
  background-color: #d3d3d4; /* Establece el color de fondo en negro */
  width: 100%; /* Hace que la línea ocupe todo el ancho disponible */
  margin: 1px;
}  

/* compartir por whatsapp */
.whatsapp  {
     display: flex;
      gap: 15px;
      flex-wrap: wrap; /* Permite que los botones se envuelvan en otra fila si es necesario */
     justify-content: center; /* Centra los botones en la fila */
    
}

.whatsapp a {
      padding: 25px 10px;
      font-size: 16px;
      color: black;
      margin: 0px 0px 100px 0px;
      text-decoration: none;
      text-align: center; 
    }
  
  
    
    /* Media query para pantallas pequeñas */
   
    @media (max-width: 600px) {
      .whatsapp a {
      padding: 25px 10px;
      font-size: 16px;
      color: black;
      margin: 0px 0px 100px 0px;
      text-decoration: none;
      text-align: center; 
      }
    }
    
   
   
    /*  imagenes para sorteos */
   
   
   .contenedor-imagenes {
    display: flex; /* Usamos flexbox para organizar las imágenes */
    justify-content: center; /* Centrar horizontalmente en pantallas grandes */
    align-items: center; /* Centrar verticalmente si hay necesidad */
    gap: 30px; /* Espaciado entre las imágenes */
    flex-wrap: wrap; /* Permite que las imágenes se acomoden en varias filas en pantallas pequeñas */
    padding: 20px;
   
}

.contenedor-imagenes img {
    max-width: 100%; /* Ajusta las imágenes al ancho máximo del contenedor */
    border-radius: 5%;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));
    max-height: 300px;
}

@media (max-width: 768px) {
    .contenedor-imagenes {
        flex-direction: column; /* Cambia la dirección a columna en pantallas pequeñas */
        gap: 10px; /* Reduce el espacio entre las imágenes */
    }
}
     
 
   
   /* footer */ 
   
    .footer {
            width: 100%;
            background-color: #000; /* Fondo negro */
            color: #fff; /* Texto blanco */
            min-height: 400px; /* Altura mínima de 400px */
            padding: 20px; /* Espaciado interno */
            box-sizing: border-box; /* Incluir padding y border en el ancho y alto */
            margin-top: auto; /* Empuja el footer al final de la página */
            padding:20px;
            text-align: left;
           
        }
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* Tres columnas iguales */
            gap: 10px;
            max-width: 1200px; /* Ancho máximo */
            margin: 0 auto; /* Centrar horizontalmente */
        }
        .footer-grid div {
            padding: 10px;
        }
        .footer-grid h3 {
            margin-bottom: 10px; /* Margen inferior del título */
            padding: 15px;
        }
        .footer-grid p {
            margin-top: 15px; /* Margen superior del texto */
        }
        
         .footer-bottom {
            text-align: center;
            padding: 20px 0;
            border-top: 1px solid #444;
            margin-top: 80px;
        }
        
         .footer-content {
            max-width: 1200px;
            width: 100%;
        }
        .footer a {
            color: #edda50; /* Color del enlace */
            text-decoration: none; /* Sin subrayado */
        }
        .footer a:hover {
            text-decoration: underline; /* Subrayado al pasar el mouse */
        }
        
       
         /* Una columna en pantallas pequeñas */
        @media (max-width: 768px) {
            .footer-grid {
                grid-template-columns: 1fr; 
               
            }
            .footer-grid div {
                margin-top: 20px; /* Espacio entre secciones en pantallas pequeñas */
            }
        }
        
    .redes img {
      
      max-height: 50px;
      margin: 5px;
  }  
      
    .titulosfooter  {
        
         font-size: 22px;
    }