/*css*/
  body{
      font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      color:#b20000;
  }

  a{
      color:#610909;
      text-decoration: none;
      margin-right: 20px;
      font-weight: bold;
  }

  /*PORTADA*/
.hero button {
  background: linear-gradient(90deg, #610909, #b20000);
  color: #fff;
  border: none;
  padding: 14px 34px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.hero button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75px;
  width: 50px;
  height: 100%;
  background: rgba(255,255,255,0.5);
  transform: skewX(-25deg);
  transition: left 0.5s;
}

.hero button:hover::before {
  left: 125%;
}

.hero button:hover {
  transform: scale(1.05);
}


  
  .hero{
color: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 100px 20px;
      text-align: center;
      /*Fondo*/
      background-image: url('../img/logos/fondo\ prueba\ 2.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 120vh;
  }
  .left{
    padding: 20px;
    margin: 20px;
    font-size: 1.5rem;
    align-items: left;
  }
  .right{
    align-items: right;
    font-size: 1.5rem;
    margin: 20px;
  }
  /* PRODUCTOS DESTACADOS */
  .productos-destacados h2{
    color: #222;
    margin-left: 20px;
    margin-bottom: 20px;
  }
  .flex-productos{
      display: flex;
      flex-wrap: wrap; /* permite varias filas */
      gap: 20px;
      justify-content: center;
      padding: 40px;
  }

  .producto{
      display: flex;
      flex-direction: column; /* apila img + texto + botón */
      width: 200px;
  }
  /* Botón agregar al carrito */
.producto button {
    border: 2px solid #610909;
    background-color: #610909; /* rojo */
    color: #ffffff;             /* texto blanco */
    padding: 10px 20px;         /* espacio interno */
    border-radius: 20px;         /* esquinas ligeramente redondeadas */
    cursor: pointer;            /* puntero al pasar por encima */
    font-size: 14px;
    font-weight: bold;
}

.producto button:hover {
  color: #610909;
   background-color: #ffffff; /* rojo */
    border: 2px solid #610909;
}

  /* NEWSLETTER */
  .newsletter form{
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 10px;
  }

  .flex-productos {
      display: flex;
      flex-wrap: wrap; 
      justify-content: center;  
      gap: 10px;             
      padding: 20px;
  }

  /* Cada producto */
  .producto {
      position: relative;
      flex:290px;
      cursor: pointer;
      transition: 0.5s ease;
  }

  .producto:hover{
    transform: scale(1.05);
  }

  /* Imágenes con tamaño uniforme */
  .producto img {
      width: 100%;
      height:600px;         /*todos los productos de la misma altura*/
      display: block;
  }

  /*gap es el espacio entre hijos dentro de un mismo padre.
  padding es el aire dentro de la caja.
  margin es el aire fuera de la caja.*/
  .img-container {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  /* imagen base */
  .img-container img {
    width: 100%;
    display: block;
  }

  /* imagen hover encima */
  .img-container .img-hover { /*RECORTAR IMAGENES AL TAMAÑO DE LA PRINCIPAL NO RESIZE*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  /* efecto hover */
  .img-container:hover .img-hover {
    opacity: 1;
  }

  .img-container:hover .img-default {
    opacity: 0;
  }
  /*productos destacados texto tamaño*/
  .productos-destacados h2{
    font-size: 40px;
  }

  h3{
    text-align: left;
  }

/*INFO PRODUCTO*/
.info-producto {
  align-self: flex-start; /* mueve el bloque a la izquierda */
  text-align: left;       /* texto alineado a la izquierda */
  width: 100%;            /* ocupa todo el ancho */
  margin-top: 10px;
}

.info-producto h3 {
  font-size: 0.9rem;
  text-transform: uppercase;
  color: #222;
  margin: 5px 0 0px 0px;
}
.info-producto .precio {
  font-size: 0.85rem;
  color: #555;
}
.producto button {
  align-self: center;
  margin-top: 10px;
}



/* === Banner de cookies === */
.cookie-banner {
  position: fixed;
  bottom: -150px; /* inicialmente oculto */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 600px;
  background: #ffffff;
  color: #610909; 
  border-radius: 0px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  padding: 15px 20px;
  font-family: 'Trebuchet MS', sans-serif;
  text-align: center;
  z-index: 2000;
  transition: bottom 0.5s ease, opacity 0.5s ease;
  opacity: 0;
}

.cookie-banner.show {
  bottom: 30px; /* aparece */
  opacity: 1;
}

.cookie-banner.hide {
  opacity: 0;
  bottom: -150px; /* se desliza hacia abajo */
}

.cookie-banner p {
  margin: 0 0 10px;
  font-size: 14px;
}

.cookie-banner a {
  color: #b20000;
  text-decoration: underline;
}

.cookie-banner button {
  border: 2px solid #610909;
  background-color: #610909;
  color: white;
  padding: 8px 18px;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

.cookie-banner button:hover {
  color: #610909;
   background-color: #ffffff;
    border: 2px solid #610909;
}




/* ===== Estilos del loader ===== */
#loader.loader-overlay {
  position: fixed;
  inset: 0;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overflow: hidden;
}

.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding: 20px;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
}

/* Logo */
.loader-logo {
  width: 180px;
  height: auto;
  animation: palpitar 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(139,0,0,0.15));
}

/* Título */
.loader-title {
  margin: 0;
  font-family: 'Trebuchet MS', Arial, sans-serif;
  color: #610909;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 1.1rem;
}

/* Barra de progreso */
.progress-bar {
  width: 260px;
  height: 8px;
  background: #eee;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}

.progress {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #610909, #b20000);
  border-radius: 999px;
  transition: width 0.2s linear;
}

/* Footer fijo abajo */
.loader-footer {
  justify-content: center;
  text-align: center;
  position: absolute;
  bottom: 25px;
  width: 100%;
  font-size: 0.85rem;
  color: #610909;
  letter-spacing: 0.6px;
  background-color: transparent;
  font-family: 'Trebuchet MS', Arial, sans-serif;
}

/* Palpitación */
@keyframes palpitar {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* Ocultar al terminar */
#loader.fade-out {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
  pointer-events: none;
}
/*FOOTER*/


/* --- Contenedor principal del footer --- */
.footer-container {
justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* Alinea desde la izquierda */
  background-color: #610909; /* Fondo rojo */
  color: #ffffff; /* Texto blanco */
  padding: 30px 50px;
  font-family: 'Arial', sans-serif;
  gap: 50px; /* Separación entre columnas */
}

/* --- Sección newsletter --- */
.footer-newsletter {
  flex: 1 1 300px;
  margin-bottom: 20px;
}

/* --- Sección legal --- */
.footer-legal {
    text-align: right;
    align-items: end ;
  margin-bottom: 20px;
}
.footer-newsletter {
  flex: 1 1 300px;
  margin-bottom: 20px;
}

.footer-newsletter h3 {
  font-size: 16px;
  margin-bottom: 15px;
  line-height: 1.4;
  text-transform: uppercase;
}

.footer-newsletter form {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.footer-newsletter input[type="email"] {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
}

.footer-newsletter button {
  background-color: #ffffff; /* Botón blanco */
  color: #610909; /* Texto rojo */
  border: none;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
}

.footer-newsletter p {
  font-size: 12px;
  color: #ffffff;
}

.footer-newsletter a {
  color: #ffffff;
  text-decoration: underline;
}

/* --- Sección legal --- */
.footer-legal {
  flex: 1 1 200px;
  margin-bottom: 20px;
}

.footer-legal ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-legal li {
  margin-bottom: 8px;
}

.footer-legal a {
  color: #ffffff;
  text-decoration: none;
}

/* --- Footer bottom --- */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #610909; /* rojo más oscuro para diferenciar */
  padding: 15px 50px;
  flex-wrap: wrap;
}

.footer-bottom p {
  color: #ffffff;
  font-size: 14px;
  margin: 0;
}

/* --- Métodos de pago --- */
.footer-payments img {
  object-fit: contain;
}

/* --- Responsivo --- */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    padding: 20px;
  }
  
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  
  .footer-newsletter form {
    flex-direction: column;
  }
  
  .footer-newsletter button {
    width: 100%;
  }
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}