.gelasio-uniquifier{
  font-family: "Gelasio", serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
}

:root {
	--primary-color: white;
	--dark-color: #1F2D52;
}

body{
    background-color: #1F2D52;
    margin: 0px;
}

p, h2, h3{
  color: aliceblue;
}

h2{
  font-size: 90px;
}

@media (max-width: 960px){
  h2{
    font-size: 55px;
  }
}

li{
  color: azure;
}

.banner{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;

  height: 90vh;
}

.banner-text{
  text-align: center;
  justify-content: center;
  justify-items: center;
  margin-top: 12rem;
}

.sede{
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #CD8B33;
  background-color: #cd8a335f;
  border: 1px solid #CD8B33;
  border-radius: 5px;
  padding: 5px;
  text-align: left;
}

/* HEADER */
.container-hero {
	background-color: #1F2D52;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    width: 100%;
}

.hero {
	display: flex;
	align-items: center;
	padding: 0;
}

.customer-support {
	display: flex;
	align-items: center;
	gap: 2rem;
}

.customer-support i {
	font-size: 3.3rem;
}

.content-customer-support {
	display: flex;
	flex-direction: column;
}

.container-logo {
	display: flex;
	gap: 0.5rem;
}

.container-logo i {
	font-size: 3rem;
}

.container-logo h1 a {
	text-decoration: none;
	color: #000;
	font-size: 3rem;
	text-transform: uppercase;
	letter-spacing: -1px;
}

.container-user {
	display: flex;
	gap: 1rem;
	cursor: pointer;
  align-items: center;
  justify-self: right;
}

.container-user .fa-user {
	color: #CD8B33;
	padding-right: 1rem;
	border-right: 1px solid #CD8B33;
}

.justify-container{
  display: flex;
  width: 100%;
  justify-self: right;
}

.segunda-cinta{
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0,5rem;
}

.segunda-text-cinta{
  text-align: center;
  display: inline;
  font-size: 12px;
  padding: 15px;
  width: 60%;
}

/* ************* NAVBAR ************* */
/* Estilos base del Navbar */

.nav-links {
  display: flex;
  list-style: none;
  gap: 20px;
}

.nav-links a {
  color: #CD8B33;
  text-decoration: none;
}

/* Ocultar el checkbox y el icono en escritorio */
.menu-checkbox, .hamburger {
  display: none;
}

/* --- Responsive: Pantallas Pequeñas --- */
@media (max-width: 1200px) {
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-self: right;
    gap: 5px;
    cursor: pointer;
    padding: 1rem;
  }

  /* Dibujar las 3 líneas del icono hamburguesa */
  .hamburger span {
    width: 25px;
    height: 3px;
    background-color: #CD8B33;
    transition: 0.3s;
  }

  .nav-links {
    display: none; /* Colapsar el menú por defecto */
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 75%;
    left: 0;
    color:#FAF5BF;
    background-color:#1f2d52db;
    padding: 1rem 0;
    text-align: center;
  }

  /* Mostrar el menú cuando el checkbox esté marcado */
  .menu-checkbox:checked ~ .nav-links {
    display: flex;
  }
}

/* FIN DE HEADER */

.logo_ico{
    height: 60px;
    width: 170px;
    padding: 1rem;
}

ul{
    list-style-type: none;
    display: flex;
    margin-right: 1rem;
    gap: 15px;
    align-items: center;
}

.nav-item a:hover{
    color: #37fe4e;
}

.btn-dorado {
    background-color: #B2691E; 
    color: #FAF5BF; 
    
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold; 
    border: none; 
    border-radius: 4px; 
    width: 250px;
    margin: 1rem;
    
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-transparente {
  background-color: transparent;
    color: #FAF5BF; 
    
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold; 
    border: none; 
    border-radius: 4px; 
    width: 250px;
    
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: 2px solid #DDAF58;
}



.btn-dorado a {
    text-decoration: none;
    color: #FAF5BF;
}

.btn-transparente a {
  text-decoration: none;
  color: #DDAF58;
}

.btn-transparente:hover {
  background-color: #FAF5BF;
  color: #1F2D52;
  border: none;
}

.recuadro{
    background-color: #1f2d52b4;
    opacity: 0.8;
    padding: 0.5rem;
    border-radius: 15px;
    margin: 0.5rem;
}

/* Efecto cuando pasas el mouse por encima */
.btn-dorado:hover {
    background-color: #DDAF58;
    color: #1F2D52;
}

/*COLECCIONES*/
.sobre_conf{
    margin: 2rem;
    width: 80%;
    justify-self:center;
    display: block;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

@media (min-width: 1000px){
    .sobre_conf{
        flex-direction: row;
        display: flex;
    }

    .carta-color{
      width: 33.33%;
    }
}

@media (min-width: 1000px){
    .tarjeta-text{
        width: 50%;
    }
}

.carta-color{
  padding: 1rem;
  border-radius: 15px;
  border-color: #e2e2e2;
  box-shadow: #faf5bf 0px 0px 8px;
  margin: 15px;
}

.carta-color-animation{
  padding: 1rem;
  margin: 15px;
  width: 80%;

  animation: mover 10s linear infinite;
}

/* movimiento automático */
@keyframes mover {

    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-15%);
    }

}

.carta-text{
  color: #e2e2e2;
  font-size: 25px;
}

.foto-producto{
  height: 100%;
  width: 100%;
  border-radius: 15px;
}

.cart-mayor{
  display: flex;
  justify-self: center;
  align-items: center;
  justify-items: center;
  width: 75%;
  padding: 1rem;
}

.link-page{
  text-decoration: none;
  color: #e2e2e2;
}

.conf-abajo{
   margin: 2rem;
    width: 90%;
    justify-self:center;
    display: block;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 10px;
}

@media (min-width: 300px){
    .conf-abajo{
        flex-direction: row;
        display: flex;
    }
}

.conf-abajo-text{
  text-align: left;
  align-items: center;
  padding: 2rem;
}

.whatsapp_button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10;
    background-color: #37fe4e;
    border-radius: 50%;
    padding: 10px;
    height: 50px; 
    width: 50px;
}

.soporte_button {
    position: fixed;
    bottom: 115px;
    right: 20px;
    z-index: 10;
    background-color: #CD8B33;
    border-radius: 50%;
    padding: 10px;
    height: 50px; 
    width: 45px;
}