/* --------------pagina principal-------------- */
    @font-face {
    font-family: 'MiFuente';
    src: url('../fonts/ClearviewFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*@font-face {
    font-family: 'MiFuente';
    src: url('../fonts/MiFuente-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}*/

.activo{
   color: rgba(74,188,240,1);
}


    body {
      margin: 0;
      font-family: 'MiFuente', Georgia, serif; /* ← Aquí cambias */
      background-color: #fdf8f3;
      color: #3a1d0d;
    }

    header {
      /*background: linear-gradient(to right, #4d260f, #6a3a18);*/
      background: linear-gradient(to right, #2a2a2a, #4d4d4d);
      color: white;
      padding: 15px 10%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    header h1 {
      font-size: 1.4rem;
      margin: 0;
      font-family: 'MiFuente', sans-serif;
      font-weight: 700; /* Grosor máximo */
    }


    
  

    /* nav a {
      color: white;
      text-decoration: none;
      margin-left: 20px;
      font-weight: 500;
    } */


nav {
  display: flex;
  gap: 2rem; /* separación entre enlaces */
  justify-content: center;
  padding: 1rem 0;
  flex-wrap: wrap; /* permite que los enlaces bajen de línea si no caben */
}

nav a {
  position: relative;
  text-decoration: none;
  color: white;
  font-weight: 500;
  padding-bottom: 5px; /* espacio para la línea */
  transition: color 0.3s;
}

/* efecto hover */
nav a:hover {
  color: #007BFF; /* cambia color al pasar mouse */
}

/* línea inferior que aparece al hover */
nav a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  left: 0;
  bottom: 0;
  background-color: #007BFF;
  transition: width 0.3s;
}

nav a:hover::after {
  width: 100%;
  box-shadow: 0px 0px 40px 8px rgba(255,255,255,1);
}



/* --- Responsivo --- */
@media (max-width: 768px) {
  nav {
    flex-direction: column; /* enlaces en columna */
    gap: 0.1rem; /* menos separación para móvil */
    align-items: center;
  }

  nav a {
    font-size: 1rem; /* opcional: ajustar tamaño */
    text-align: center;
  }
}




    .hero {
      /*background-color: #8b4513;*/
      background-image: url('../img/fotos/baner.jpg');
      background-size: cover;
      background-position: center;
      text-align: center;
      color: white;
      padding: 100px 20px;
    }

    .hero h2 {
      font-size: 2.5rem;
      margin-bottom: 20px;
    }

    .hero button {
      background-color: #c47a2c;
      color: white;
      padding: 12px 25px;
      border: none;
      border-radius: 6px;
      font-size: 1rem;
      cursor: pointer;
    }

    .productos {
      text-align: center;
      padding: 60px 10%;
    }

    .productos h2 {
      font-size: 2rem;
      margin-bottom: 40px;
    }

    .grid {
      display: flex;
      gap: 30px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .item {
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      padding: 20px;
      width: 250px;
      text-align: center;
    }

    .item img {
      width: 100%;
      border-radius: 10px;
    }

    .item p {
      margin-top: 10px;
      font-weight: bold;
    }

    .nosotros {
      padding: 60px 10%;
      display: flex;
      gap: 40px;
      align-items: center;
      flex-wrap: wrap;
    }

    .nosotros-texto {
      flex: 1;
    }

    .nosotros-texto h2 {
      font-size: 2rem;
      margin-bottom: 15px;
    }

    .nosotros-texto p {
      font-size: 1.1rem;
      line-height: 1.5;
    }

    .nosotros img {
      flex: 1;
      max-width: 450px;
      border-radius: 10px;
    }

    .texto-justificado {
        text-align: justify;
    }


    footer {
      /*background: #4d260f;*/
      background: #2a2a2a;
      color: white;
      text-align: center;
      padding: 10px;
      margin-top: 50px;
      font-size: 0.9rem;
    }


    /*------------------------------slider---------------------------------------------------------------------------------------------------------------------*/
.slider {
  position: relative; /* importante para que los controles se posicionen sobre el slider */
  width: 80%;
  margin: 40px auto;
  overflow: hidden;
  border-radius: 12px; 
}

.slider-container {
  display: flex;
  width: 100%;
  transition: transform 0.6s ease-in-out;
}

.slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 20px;
  background: white;
}


.slide-text {
  flex: 1 1 45%;
  padding-left: 50px;
}

.slide-text h3 {
  margin-bottom: 10px;
  font-size: 1.8rem;
}

.slide-text p {
  line-height: 1.5;
}

.slide-img {
  flex: 1 1 50%;
  text-align: center;
}

.slide-img img {
  max-width: 100%;
  max-height: 350px; /* altura agradable */
  object-fit: contain; /* mantiene proporción */
  border-radius: 12px;
}

/* Controles */
.slider-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none; /* evitar bloquear clics en slides */
}

.slider-controls button {
  pointer-events: all; /* permite click */
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 50%;
  font-size: 1.5rem;
}


.slider-controls button:hover {
  box-shadow: 0px 0px 40px 8px rgba(74,188,240,1);
}
.nosotros-imagen {
  text-align: center;
  margin-top: 20px;
}

.btn-visitanos {
  display: inline-block;
  margin-top: 15px;
  padding: 12px 24px;
  background-color: #c62828; /* rojo mexicano */
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.btn-visitanos:hover {
  background-color: #8e0000; /* rojo más oscuro */
}






    /* ----------- Responsividad ------------------------------------------------------------------------------------------------------ */
    @media (max-width: 768px) {
      header {
        flex-direction: column;
        text-align: center;
      }

      nav {
        margin-top: 10px;
      }

      nav a {
        display: inline-block;
        margin: 10px;
      }

      .hero h2 {
        font-size: 2rem;
      }

      .productos h2,
      .nosotros-texto h2 {
        font-size: 1.6rem;
      }

      .slide {
    flex-direction: column-reverse; /* texto arriba, imagen abajo */
    text-align: center;
  }
  
  .slide-text, .slide-img {
    flex: 1 1 100%;
    padding: 10px 0;
  }

  .slide-img img {
    max-height: 250px;
  }

    }





    @media (max-width: 480px) {
      .hero {
        padding: 60px 20px;
      }

      .hero h2 {
        font-size: 1.5rem;
      }

      .hero button {
        padding: 10px 18px;
        font-size: 0.9rem;
      }

      .grid {
        flex-direction: column;
        align-items: center;
      }

      .item {
        width: 90%;
      }

      .nosotros {
        flex-direction: column;
        text-align: center;
      }
    }



/*----------------------botones inferiroes-----------------------------------------*/
/* Botones flotantes */

#btn-home,
#btn-products,
#btn-arriba {
  position: fixed;
  bottom: 20px;
  width: 50px;        /* ancho fijo */
  height: 50px;       /* alto fijo igual al ancho para que sea circular */
  line-height: 50px;  /* centra el texto verticalmente */
  background: rgba(0,0,0,0.6);
  color: white;
  border-radius: 50%; /* completamente redondo */
  text-align: center;
  font-size: 1.5rem;
  z-index: 1000;
  transition: background 0.3s;
}

/* Efecto hover */
#btn-home:hover,
#btn-products:hover,
#btn-arriba:hover {
  background: rgba(0,0,0,0.9);
}

/* Posiciones específicas */
#btn-home {
  left: 20px;
}

#btn-products {
  left: 50%;
  transform: translateX(-50%);
}

#btn-arriba {
  right: 20px;
}

/* Responsivo: reducir tamaño en pantallas pequeñas */
@media (max-width: 600px) {
  #btn-home,
  #btn-products,
  #btn-arriba {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 1.2rem;
  }
}


.footer-note {
    text-align: center;
    font-size: 14px;
    color: red;
    margin-top: 10px;
    line-height: 1.4;
}


/*------ultimo mensaje de pagina de index.html  donde le indicamos al clie nte que pase a visitarnos------*/
.store-visit-message {
  text-align: center;        /* centra el texto */
  font-size: 0.90rem;        /* tamaño discreto */
  color: #333;               /* gris oscuro suave */
  background: #f9f9f9;       /* fondo ligero */
  padding: 15px 10px;        /* espacio alrededor */
  margin: 30px auto 0 auto;  /* margen superior y centrado */
  max-width: 900px;           /* no se extienda demasiado en pantallas grandes */
  border-radius: 8px;         /* bordes suaves */
  box-shadow: 0px 2px 6px rgba(0,0,0,0.1); /* sombra ligera */
  line-height: 1.5;           /* buena legibilidad */
}

.store-visit-message em {
  color: #555;               /* inglés ligeramente más tenue */
  font-style: normal;        /* opcional: puedes quitar cursiva si quieres */
}