*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    font-family: 'Cal Sans', sans-serif;
}
h1{    color: rgb(200, 191, 181);
    margin-left: 20px;
    background-color: rgba(23, 36, 51, 0.8);
    display: inline-block;
    padding: 5px 10px;
    border-radius: 8px;
    margin-top: 20px;
}
h2{
    color: rgb(205, 86, 22);
    margin-left: 20px;
    background-color: rgba(23, 36, 51, 0.8);
    display: inline-block;
    padding: 5px 10px;
    border-radius: 8px;
    margin-top: 20px;
}
header {
    background-color: rgb(200, 191, 181);
    text-align: center;
    padding: 20px 0;
}
nav{
    background-color: rgb(23, 36, 51);
}
#nav-list {
    display:flex;
    justify-content: center;
    gap: 20px;
    list-style: none;
    padding: 10px;
}
#nav-list a{
    text-decoration: none;
    color: rgb(200, 191, 181);
    transition: color 0.5s;
}
#nav-list a:hover {
    color: rgb(205, 86, 22);
}
main {
    background-image: url("../image/background.jpg");
    background-size: cover;
    background-position: center;
   min-height :100vh;
    padding-bottom: 40px;
}
#media {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 20px;
}
;#media section{
    flex:1 1 300px;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.img-media{
    flex:1;
    margin: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.img-media img{
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    border-radius: 10px;
}
video {
    width: 100%;
    height: auto;
    max-height: 400px;
    border-radius: 10px;
    object-fit: cover;
    
}
iframe {
    width: 100%;
    border-radius: 10px;
    height: 300px;
    border: none; 
}    

.cont-mapa {
    width: 100%;
    max-width: 500px;
}
#mapa{
    color:rgb(205, 86, 22);
    background-color: rgb(23, 36, 51);
    padding: 20px;
    font-family:  'Cal Sans';
    width: 100%;
    border-radius: 10px;
}
#mapa p{
    margin-bottom: 15px;
}
#prod{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    
}
.prod{
    background-color: rgb(23, 36, 51);
    width: 12rem;
    margin: 1rem;
    padding-bottom: 1rem;
    border-radius: 10px;
    transition: transform 0.5s ease;
}
.prod:hover{
    transform: scale(1.15);
    
}
.prod img{
    width: 100%;  
    border-top-left-radius: 10px;  
    border-top-right-radius: 10px;
}
.prod p{
    color: rgb(205, 86, 22);
    text-align: center;
}
form {
    background-color: rgb(23, 36, 51);
    color: rgb(200, 191, 181);
    font-family: 'Cal Sans';
    padding: 20px;
    margin-top: 20px;
}
form div {
    margin-bottom: 15px;
}
input, textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
}
button[type="submit"] {
    background-color: rgb(205, 86, 22);
    color: white;
    border: none;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    transition: transform 0.5s ease;
}
button:hover{
    transform: scale(1.15);
    background-color: rgb(212, 107, 50);

}    
footer {
    background-color: rgb(23, 36, 51);
    padding: 20px;
    color: rgb(200, 191, 181);
}
.cont-footer{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 10px;
}
#redes {
    list-style: none;
    padding: 0;
}

#redes li {
    margin-bottom: 10px;
}

#redes a {
    text-decoration: none;
    color: rgb(205, 86, 22);
    transition: 0.5s;
    font-size: 1rem;
}

#redes a:hover {
    color: rgb(255, 153, 0);
    transform: scale(1.05);
} 
#footerNav {
    list-style: none;
    padding: 0;
}
#footerNav li {
    margin-left: 5px;
    
}
#footerNav a{
    text-decoration: none;
    color: rgb(200, 191, 181);
}
#footerNav a:hover {
    color:rgb(205, 86, 22);
    transition: 0.5s;
}
.textos {
    text-align: center;
    font-family: 'Manrope', sans-serif;
    color: rgb(205, 86, 22);
}
.grid-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.producto {    
    background-color: rgb(23, 36, 51);
    width: 12rem;
    margin: 1rem;
    padding-bottom: 1rem;
    border-radius: 10px;
    transition: transform 0.5s ease;
}

.producto img {
    width: 100%;  
    border-top-left-radius: 10px;  
    border-top-right-radius: 10px;
}
.producto:hover{
    transform: scale(1.15);
}
.producto p{
    color: rgb(205, 86, 22);
    text-align: center;
}
.producto h3 {
    text-align: center;
    color: rgb(205, 86, 22);
    margin: 10px 0;
    font-size: 1.1rem;
    font-weight: normal;
}
.btn-comprar {
  display: block;
  width: 80%;
  margin: 10px auto 0 auto;
  padding: 8px 0;
  background-color: rgb(205, 86, 22);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-family: 'Cal Sans', sans-serif;
}

.btn-comprar:hover {
  background-color: rgb(212, 107, 50);
  transform: scale(1.05);
}   
#carrito {
  background-color: rgb(23, 36, 51);
  padding: 20px;
  border-radius: 10px;
  margin: 20px;
  color: rgb(200, 191, 181);
  font-family: 'Cal Sans', sans-serif;
}
.item-carrito {
  background-color: rgb(33, 46, 66);
  border: 1px solid rgba(205, 86, 22, 0.2);
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  transition: transform 0.3s ease;
}

.item-carrito:hover {
  transform: scale(1.02);
}

.item-carrito p {
  color: rgb(205, 86, 22);
  margin: 0;
  font-size: 1rem;
  flex: 1;
}
.item-carrito-buttons {
  display: flex;
  gap: 5px;
}

.btn-cantidad,
.btn-eliminar {
  background-color: rgb(205, 86, 22);
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  font-family: 'Manrope', sans-serif;
  font-size: 0.85rem;
}

.btn-cantidad:hover,
.btn-eliminar:hover {
  background-color: rgb(212, 107, 50);
  transform: scale(1.1);
}
.grid-reseñas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  padding: 20px;
  margin-top: 30px;
  background-color: rgb(23, 36, 51);
  border-radius: 10px;
  
}

.grid-reseñas h3 {
  grid-column: 1 / -1;
  color: rgb(205, 86, 22);
  text-align: center;
  margin-bottom: 20px;
  font-family: 'Cal Sans', sans-serif;
}

.reseña {
  background-color: rgb(33, 46, 66);
  padding: 15px;
  border-radius: 10px;
  color: rgb(200, 191, 181);
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.reseña p {
  font-style: italic;
  margin-bottom: 10px;
}

.reseña span {
  text-align: right;
  font-weight: bold;
  color: rgb(205, 86, 22);
}
.contenedor-central {
  display: block;
  justify-content: center;
  padding: 0 20px;
}