html {
  font-size: 10px;
}

@media (min-width: 600px) {
  html {
    font-size: 14px;
  }
}

@media (min-width: 800px) {
  html {
    font-size: 16px;
  }
}

body,
html {
  text-rendering: optimizeLegibility;
  text-shadow: rgba(0, 0, 0, 0.25) 0 0 1px;
  height: 100%;
  margin: 0;
}

/* Ocultar el botón en pantallas grandes */
.menu-toggle {
  display: none;
}

nav {
  position: fixed;
  padding-top: 3rem;
  top: 0;
  width: 100%;
  z-index: 10;
  display: flex;
  transition: background-color 0.4s ease;
  justify-content: space-around;
  align-items: center;
  height: 50px;
}

.scrolled {
  padding-top: 0%;
  height: auto;
  background-color: black; /* El color que quieres al hacer scroll */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Sombra para destacarlo */
}

.scrolled a {
  color: #fff;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

nav ul li {
  display: inline;
  font-size: 1.4rem;
  font-family: Montserrat, sans-serif;
  text-transform: uppercase;
}

a {
  color: #fff;
  transition: all 500ms ease-in;
  padding: 3px;
}

a:hover {
  background-color: rgba(0, 0, 0, 0.55);
}

/* ---------------------------------------------------- */
/* ----------------- DISEÑO RESPONSIVE ----------------- */
/* ---------------------------------------------------- */

/* Estilos para pantallas pequeñas (Menos de 800px) */
@media (max-width: 800px) {
  /* 1. Muestra el botón y oculta el menú por defecto */
  .menu-toggle {
    display: block; /* Muestra el botón hamburguesa */
    background: none;
    border: none;
    color: white;
    font-size: 2.5rem;
    cursor: pointer;
    z-index: 1001;
    padding: 0.5rem;
  }

  /* 2. Reestructuración del menú (ul) para móviles */
  nav ul.menu {
    position: absolute;
    top: 80px; /* Debajo de la altura del nav */
    left: 0;
    width: 100%;
    height: 0; /* Por defecto está cerrado */
    overflow: hidden; /* Oculta el contenido cuando está cerrado */
    flex-direction: column; /* Apila los enlaces verticalmente */
    align-items: center;
    transition: height 0.4s ease, background-color 0.4s ease;
    background-color: rgba(0, 0, 0, 0.9); /* Fondo semi-transparente oscuro */
    padding: 0; /* Quitamos el padding para el menú cerrado */
  }

  /* 3. Clase JS: Menú Abierto */
  nav ul.menu.open {
    height: auto; /* Ocupa el espacio necesario para el contenido */
    padding: 20px 0; /* Añadimos padding para el contenido */
  }

  /* Estilo de los elementos del menú */
  nav ul.menu li {
    width: 100%;
    text-align: center;
    padding: 1rem 0;
  }

  /* Estilo de los enlaces dentro del menú */
  nav ul.menu li a {
    display: block;
    padding: 0.5rem;
    /* Hacemos el color explícito para el menú abierto */
    color: white;
  }

  /* El nav principal al hacer scroll sigue funcionando igual */
  .scrolled {
    height: 70px; /* Puedes reducir un poco la altura al hacer scroll */
  }

  .logo img {
    width: 150px;
  }
}

section {
  align-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: space-around;
  position: relative;
  width: 100%;
  text-align: center;
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
}

.home {
  background-image: url(assets/section/1.webp);
  background-color: #1f3441;
}

.about-us {
  background-image: url(assets/section/2.webp);
  background-color: #1b1c15;
}

.products {
  background-image: url(assets/section/3.webp);
  background-color: #1b1c15;
}

.contact {
  background-image: url(assets/section/4.webp);
  background-color: #1b1c15;
}

.gallery {
  background-image: url(assets/section/5.webp);
  background-color: #1b1c15;
}

.wrapper {
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

p,
h1,
h2 {
  color: #fff;
}

h1 {
  font-size: 4em;
  text-transform: uppercase;
  font-family: Montserrat, sans-serif;
  margin-bottom: 0.25em;
}

h2 {
  font-size: 2.25em;
  font-family: Arapey, serif;
  font-style: italic;
}

p {
  font-size: 1.6em;
  font-family: Arapey, serif;
  margin: 0 10%;
}

section > * {
  align-self: auto;
  flex: 0 1 auto;
  order: 0;
}

form {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  border: #fff 2px solid;
  padding: 1rem;
  width: 70%;
}

input,
textarea {
  font-size: 1.6em;
  font-family: Arapey, serif;
  padding: 0.5rem;
  border: none;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

/* Products */

.card-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.flip {
  position: relative;
  display: inline-block; /* Traído de la sección 'custom' */
  margin-right: 2px; /* Traído de la sección 'custom' */
  margin-bottom: 1em; /* Traído de la sección 'custom' */
  width: 22rem; /* Traído de la sección 'custom' */
}

/* Shared styles for front and back faces (Resolving >.front, >.back) */
.flip > .front,
.flip > .back {
  display: block;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 0.5s;
  transition-property: transform, opacity;

  /* Propiedades de 'custom' */
  color: white;
  background-size: cover !important;
  background-position: center !important;
  height: 10rem;
  padding: 1em 2em;
  background: #313131;
  border-radius: 10px;
}

.front {
  filter: blur(100%);
}

/* Paragraph styles inside the flip faces (Resolving p { ... }) */
.flip > .front p,
.flip > .back p {
  font-size: 0.9125rem;
  line-height: 160%;
  color: #999;
}

/* Front Face (Initial State) */
.flip > .front {
  transform: rotateY(0deg);
}

/* Back Face (Initial State) */
.flip > .back {
  position: absolute;
  opacity: 0;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  transform: rotateY(-180deg);
}

/* Text Shadow Utility */
.text-shadow {
  text-shadow: 1px 1px rgba(0, 0, 0, 0.04), 2px 2px rgba(0, 0, 0, 0.04),
    3px 3px rgba(0, 0, 0, 0.04), 4px 4px rgba(0, 0, 0, 0.04),
    0.125rem 0.125rem rgba(0, 0, 0, 0.04), 6px 6px rgba(0, 0, 0, 0.04),
    7px 7px rgba(0, 0, 0, 0.04), 8px 8px rgba(0, 0, 0, 0.04),
    9px 9px rgba(0, 0, 0, 0.04), 0.3125rem 0.3125rem rgba(0, 0, 0, 0.04),
    11px 11px rgba(0, 0, 0, 0.04), 12px 12px rgba(0, 0, 0, 0.04),
    13px 13px rgba(0, 0, 0, 0.04), 14px 14px rgba(0, 0, 0, 0.04),
    0.625rem 0.625rem rgba(0, 0, 0, 0.04), 16px 16px rgba(0, 0, 0, 0.04),
    17px 17px rgba(0, 0, 0, 0.04), 18px 18px rgba(0, 0, 0, 0.04),
    19px 19px rgba(0, 0, 0, 0.04), 1.25rem 1.25rem rgba(0, 0, 0, 0.04);
}

/* Gallery */

/* --- CONFIGURACIÓN DE LA ANIMACIÓN --- */

/* La animación se mueve 80% (4 de 5 elementos) */
@keyframes desplazamiento {
  0% {
    transform: translateX(0%); /* Muestra la Imagen 1 original */
  }

  /* El 99.99% del tiempo de la animación es para mover las imágenes */
  99.99% {
    transform: translateX(-80%); /* Muestra la Imagen 1 repetida */
  }

  /* El salto instantáneo ocurre aquí: volvemos al 0% */
  100% {
    transform: translateX(0%); /* ¡Salto instantáneo al inicio! */
  }
}

/* --- Carousel --- */

/* Contenedor visible */
.carrousel-contenedor {
  width: 100%;
  max-width: 1200px;
  margin: 40px auto;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* La lista de imágenes: Aplica el nuevo tiempo */
.carrousel-lista {
  display: flex;
  width: 400%; /* Sigue siendo el 400% para 4 elementos */
  height: 450px;
  animation: desplazamiento 60s linear infinite;
}

/* Pausar la animación al pasar el ratón */
.carrousel-lista:hover {
  animation-play-state: paused;
}

/* Cada item/slide del carrusel (Sin cambios) */
.carrousel-item {
  width: 25%;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}

/* Overlay sutil para mejorar la legibilidad del texto */
.carrousel-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.5),
    transparent
  ); /* Gradiente de oscuro a transparente */
}

/* Estilo del título */
.carrousel-item h3 {
  z-index: 10; /* Asegura que el texto esté sobre el overlay */
  color: #fff;
  font-size: 1.5em;
  font-weight: 300; /* Fuente ligera para el minimalismo */
  margin: 0;
}

.gallery-link {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  text-decoration: none;
  font-size: 1.2em;
  border-radius: 5px;
  border: solid 2px #fff;
}

/*
.gallery-link:hover {
    border: solid 16px #fff;
}
    */

.gallery-link:hover {
  box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff;
}

/* FOOTER */

.footer {
  padding-top: 2rem;
  color: #fff; /* Texto claro */
  font-family: Arial, sans-serif;
  font-size: x-small;
  justify-content: center;
  align-items: center;
  background-color: black;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: end;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 20px;
  border-bottom: 1px solid #444;
}

.footer-section {
  margin: 15px;
  min-width: 200px; /* Ancho mínimo para cada sección */
}

iframe {
  max-height: 10rem;
  max-width: 10rem;
}

/* Sección de contacto */
.contact-info p {
  margin: 5px 0;
  line-height: 1.4;
}

.contact-info a {
  color: #ccc;
  text-decoration: none;
}

.contact-info a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Sección de logo */
.logo-section img {
  max-width: 150px; /* Ajusta el tamaño del logo */
  height: auto;
  display: block;
  margin: 0 auto; /* Centra el logo */
}

/* Botón 'Volver arriba' */
.back-to-top {
  text-align: center;
}

.back-to-top button {
  background-color: rgba(0, 0, 0, 0);
  color: white;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.back-to-top button:hover {
  background-color: rgba(0, 0, 0, 0);
}

/* Sección de diseño */
.designer-info {
  text-align: center;
  padding-top: 10px;
  color: #888;
}

.designer-info a {
  color: #888;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.designer-info a:hover {
  color: #ccc;
}

.designer-logo {
  height: 4rem; /* Tamaño del logo del diseñador */
  margin-left: 5px;
  vertical-align: middle;
}

.flecha {
  transform: rotateX(180deg);
}

/* Estilos responsivos (opcional) */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column; /* Apila las secciones verticalmente en móviles */
    align-items: center;
  }

  .footer-section {
    margin: 10px 0;
    text-align: center;
  }

  .logo-section img {
    margin-bottom: 20px;
  }
}

input[name="company"] {
  display: none !important;
  visibility: hidden;
  position: absolute;
  left: -9999px;
  top: -9999px;
}