/** pseudoclase, asigna variables predefenidas */
:root {
  --color-primario: #ff7b00;
  --color-secundario: #a26e3e;
  --blanco: #fff;
}

.nav-link:hover {
    background-color: #ff62007b; /* Color de fondo al pasar el cursor */
  }

/** selector universal */
* {
  margin: 0;
  padding: 0;
  /** manejamos que las cajitas no se sobrepasen del contenedor */
  box-sizing: border-box;
}

nav {
  text-align: center;
}

nav ul li {
  /** los elementos en bloque los pone en linea */
  display: inline-block;
  list-style: none;
  margin: 0.6rem; /** 1rem = 16px */
}

.nav-link {
  text-decoration: none;
  color: var(--color-secundario);
  font-weight: bold;
}

.seccion-restaurante {
  background-image: url("https://res.cloudinary.com/dmddi5ncx/image/upload/v1720574753/practicas/hamburguesa/image1_jcpygh.jpg");
  width: 100%;
  height: 600px;
  /** indicamos que el contenido se adapte al contenedor y se reposicione hacia abajo (la imagen) */
  background-size: cover;
  background-position: bottom;
  display: flex;
  justify-content: center;
  align-items: center;
  /** 
        combina 2 propiedades flex-direction y flex-wrap
        indicamos la orientacion de los elementos
    */
  flex-flow: column nowrap;

  /** 
        Propiedad para recortar la imagen
        superior izquierda
        superior derecha
        inferior de la derecha
        inferior de la izquierda
    */

  clip-path: polygon(0 0, 100% 0%, 100% 80%, 0% 100%);
}

.titulo {
  color: var(--blanco);
  font-size: 4rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.3rem;
}

.subtitulo {
  color: var(--blanco);
  font-size: 2rem;
  letter-spacing: 0.5rem;
  font-weight: 400;
}

.caja {
  width: 80%;
  margin: auto;
  padding-top: 5%;
}

.nosotros {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-flow: row wrap;
}

.nosotros-imagen {
  position: relative;
  width: 40%;
}

.nosotros-imagen img {
  width: 100%; /*Ancho*/
  height: 300px; /*Alto*/
  object-fit: cover; /*Adaptamos la imagen a su contenedor*/
  box-shadow: 0 0 10px 2px;

  &:hover {
    transform: scale(1.1);
  }
}

.nosotros-contenido {
  width: 60%;
  padding-top: 7%;
}

h2 {
  margin-bottom: 3rem;
  text-transform: uppercase;
  text-align: center;
}

h4 {
  text-transform: uppercase;
  font-size: 1rem;
  color: #444;
  font-weight: 400;
}

span {
  color: var(--color-primario);
}

.nosotros-contenido p {
  line-height: 3rem;
  color: #666;
}

/* nav a{
    margin: .6rem;
    text-decoration: none;
    color: var(--color-secundario);
} */

.seccion-mejores {
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url(https://res.cloudinary.com/dmddi5ncx/image/upload/v1720574753/practicas/hamburguesa/image3_ulstmf.jpg);
  width: 100%;
  height: 300px;
  /** indicamos que el contenido se adapte al contenedor y se reposicione hacia abajo (la imagen) */
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;

  /** 
        combina 2 propiedades flex-direction y flex-wrap
        indicamos la orientacion de los elementos
    */
  flex-flow: column nowrap;
  margin-top: 50px;
}

.titulo2 {
  color: var(--blanco);
  font-size: 3rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.3rem;
}

.parrafo-titulo2 {
  color: var(--blanco);
  font-size: 2rem;
  letter-spacing: 0.6rem;
  font-weight: 400;
}

.btn {
  width: 150px;
  border: none;
  height: 40px;
  border-radius: 10px;
  margin-top: 20px;
  color: var(--blanco);

  &:hover {
    box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.425);
    transform: scale(1.1);
  }
}

.menu {
  padding: 10%;
}

.menu-hamburguesa {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos salten a la siguiente línea */
  justify-content: space-between; /* Distribuye los elementos con espacio uniforme */
}

.menu-tarjeta {
  width: 30%;
  height: 200px;
  box-shadow: 0 0 10px 5px;
  margin-bottom: 30px;
  background-size: cover;
  background-position: center;
  text-align: center;

  &:hover {
    box-shadow: 0 0 15px 10px rgb(255, 106, 0);
    transform: scale(1.1);
  }
}

.tarjeta {
  color: var(--blanco);
  font-weight: bold;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column nowrap;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  font-size: 2rem;
}

.menu-tarjeta:hover .tarjeta {
  opacity: 1;
}

.btn-titulo2 {
  background-color: var(--color-primario);
}

.btn-tarjeta {
  background-color: var(--color-primario);
}

/* Efecto Oscuro */
.seccion-restaurante::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 120%;
}

.seccion-restaurante *,
.seccion-mejores * {
  position: relative;
}

.menu-tarjeta:nth-child(1) {
  background-image: url(https://res.cloudinary.com/dmddi5ncx/image/upload/v1720574754/practicas/hamburguesa/product1_loak4u.jpg);
}

.menu-tarjeta:nth-child(2) {
  background-image: url(https://res.cloudinary.com/dmddi5ncx/image/upload/v1720574753/practicas/hamburguesa/product2_sgcwng.jpg);
}

.menu-tarjeta:nth-child(3) {
  background-image: url(https://res.cloudinary.com/dmddi5ncx/image/upload/v1720574753/practicas/hamburguesa/product3_rhoyoi.jpg);
}

.menu-tarjeta:nth-child(4) {
  background-image: url(https://res.cloudinary.com/dmddi5ncx/image/upload/v1720574754/practicas/hamburguesa/product4_vwkcmh.jpg);
}

.menu-tarjeta:nth-child(5) {
  background-image: url(https://res.cloudinary.com/dmddi5ncx/image/upload/v1720574754/practicas/hamburguesa/product5_ugbrat.jpg);
}

.menu-tarjeta:nth-child(6) {
  background-image: url(https://res.cloudinary.com/dmddi5ncx/image/upload/v1720574754/practicas/hamburguesa/product6_f6gyfk.jpg);
}

/* footer */

footer {
  background-image: linear-gradient(var(--color-primario), rgba(0, 0, 0, 0.7)),
    url("https://res.cloudinary.com/dmddi5ncx/image/upload/v1720574753/practicas/hamburguesa/image1_jcpygh.jpg");
  font-weight: bold;
  color: white;
  background-size: cover;
  background-position: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.ubicacion,
.contacto {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.direccion {
  padding-top: 20px;
  text-align: center;
}

.contacto {
  display: grid;
  width: 100%;
}

.btn-formulario {
  background-color: var(--color-primario);
}

.copy {
  color: black;
  padding: 40px;
  text-align: center;
  font-weight: bold;
}

/* Medias querys */

/* TELEFONO */
@media (min-width: 360px) and (max-width: 768px) {
  .menu-tarjeta {
    width: 100%;
  }

  .titulo {
    font-size: 2rem;
  }

  .subtitulo {
    font-size: 1.5rem;
    letter-spacing: 0.1rem;
  }

  .nosotros-contenido {
    flex: 0 0 100%;
    padding-bottom: 20px;
    text-align: center;
    padding-top: 10px;
  }

  .nosotros-imagen {
    flex: 0 0 100%;
  }

  .titulo2 {
    font-size: 1.5rem;
  }

  .parrafo-titulo2 {
    font-size: 1rem;
    letter-spacing: 0.3rem;
  }

  footer {
    grid-template-columns: 1fr;
    padding: 30px;
  }

  .ubicacion *,
  .contacto * {
    align-items: flex-start;
  }

  .contacto {
    margin-top: 40px;
  }
}

/* TABLET */
@media (min-width: 768px) and (max-width: 1280px) {
  .titulo {
    font-size: 4rem;
  }

  .subtitulo {
    font-size: 2rem;
    letter-spacing: 0.5rem;
  }

  .titulo2 {
    font-size: 2.5rem;
  }

  .parrafo-titulo2 {
    font-size: 2rem;
    letter-spacing: 0.6rem;
  }

  .nosotros-contenido {
    flex: 0 0 100%;
    padding-bottom: 20px;
    text-align: center;
    padding-top: 10px;
  }

  .nosotros-imagen {
    flex: 0 0 100%;
  }

  .menu-tarjeta {
    width: 100%;
  }

  .footer {
    padding-right: 50px;
  }

  .parrafo-titulo2 {
    font-size: 1rem;
    letter-spacing: 0.3rem;
  }

  footer {
    grid-template-columns: 1fr;
    padding: 30px;
  }

  .ubicacion *,
  .contacto * {
    align-items: flex-start;
  }

  .contacto {
    margin-top: 60px;
  }
}

/* ESCRITORIO */

@media (min-width: 1199.98px) {
  .seccion-mejores {
    height: 400px;
  }
  footer {
    padding: 40px;
  }
}