/* =====================
   ESTILOS GENERALES
===================== */
* {
  margin: 0; /*Aplica los margenes en 0 para todas las paginas que llamen este CSS*/
  padding: 0; /*Aplica el padding (o relleno) en 0 a todas las paginas que llamen este CSS*/
  box-sizing: border-box; /*es una propiedad de CSS que establece el modelo de caja para un elemento, haciendo que el padding y el border se incluyan dentro del width y height especificados del elemento. Se aplica a todos los elementos que llame este CSS*/
  font-family: 'Times New Roman', Times, serif; /*Cambia la fuente de la letra de todas las paginas que llamen este estilo*/
}

html, body {
  height: 100%; /* permite a flexbox estirarse */
}

body {
  font-family: Arial, Helvetica, sans-serif; /*Se explica solo. Controla la font de la pagina entera (llama directamente al body de todas las paginas a las que esta conectada el css)*/
  background-color: rgb(255, 255, 255); /*El color de fondo*/
  color: white; /*Color de todo el cuerpo de las paginas con la que este enlazada el css*/
  display: flex; /*es una propiedad de CSS que convierte un elemento en un contenedor flexible, permitiendo distribuir sus elementos hijos en una o varias líneas (filas o columnas) de manera dinámica y controlada*/
  flex-direction: column; /* layout vertical */
}

/* =====================
   SECCIÓN INDEX
===================== */
.indexbody {
  background: url(/public/img/image.png) no-repeat center center/cover; /*Pone la imagen al fondo.*/
  min-height: 100vh; /*Hace que la imagen de fondo tape toda la pantalla (principal)*/
  width: 100%; /*Modifica el ancho de la imagen (total que se va a mostrar de ella misma). Tambien el ancho de la pagina*/
  display: flex; /*Es una propiedad de CSS que convierte un elemento en un contenedor flexible, permitiendo distribuir sus elementos hijos en una o varias líneas (filas o columnas) de manera dinámica y controlada*/
  flex-direction: column; /*Es una propiedad CSS que se aplica a un contenedor flex para disponer los elementos hijos uno debajo del otro, apilándolos verticalmente en lugar de horizontalmente*/
  justify-content: center; /*Justifica el contenido en el centro*/
  align-items: center; /*Alinea todo el contenido en el centro*/
  text-align: center;  /*Aliena todo lo que es texto en el centro*/
  flex: 1; /* Ocupa todo el espacio disponible antes del footer */
  /*background-attachment: fixed; ¿Si viste ese efecto todo bacano de que la pagina se mueve para abajo pero la imagen de fondo se queda quieta por completio? bueno, este pedazo de codigo es el q hace eso jeje. Pues ya no sirve de nada*/
} 

/* Título principal */
.h1index {
  color: rgb(255, 255, 255);
  mix-blend-mode: difference;
  font-size: clamp(2rem, 2vw, 2rem); /* responsivo */ /*Por alguna razon los "rem"s no sirven despues de 2*/
  margin-bottom: 0rem; /*Responsivo, aun no revisó bien que hace, pero tengo una idea con el nombre (margin de margen y bottom de inferior, o sea, margen inferior)*/
  padding: 0rem; /*relleno que tiene la funcion en especifico (en este caso, h1)*/
  position: absolute; /*Calcula si la posicion es absoluta o relativa. Aun no miro bien los cambios que tienen una de otra pero no cambiar si NO es COMPLETAMENTE NECESARIO*/
  bottom: 53%; /*Que tan abajo de la pagina esta ubicado el elemento en cuestion (En este caso, h1)*/
  left: 50%; /*que tan a la izquierda esta ubicado un elemendo (En este caso, h1) */
  transform: translateX(-50%) translateY(10%) ; /*Ubica el h1 del index en el lugar correcto (el centro)*/
  font-family: 'Times New Roman', Times, serif; /*Se explica por si mismo, pero por si acaso: Modifica la font de un elemendo en especifico (en este caso, h1)*/
}

/*Este codigo creo que no sirve. No explicar si no es necesario. POR FAVOR*/
@media(max-width:991px) {

  .h1index{
    width: 340px;
  }
  
  .stylestudio{
    width: 340px;
  }

}


/* h2, va de la mano con el titulo principal
aun no estoy seguro de por que razon lo llame .stylestudio, my bad*/
.stylestudio {
  color: rgb(255, 255, 255); /*Modifica el color del h2*/
  mix-blend-mode: difference; /*Crea el efecto de color contrario, pero en este caso que esta uno (h1) encima de la otra (h2) crea el efecto de que el espacio del centro esta totalmente vacio*/
  font-size: clamp(4rem, 6vw, 4rem); /*Responsivo, ayuda a que el texto se modifique con el tamaño de la pantalla y que en la mayoria de los dispositivos se vea bien (a no ser que tengas una pantalla MUY pequeña)*/
  font-weight: bold; /*Negrita*/
  margin-bottom: 2rem; /*lo mismo de arriba, margen inferior del texto*/
  position: absolute; /*Lo mismo de arriba, no cambiar si no es necesario*/
  bottom: 49%; /*que tan abajo lo queremos*/
  left: 50%; /*que tan a la izquierda lo queremos*/
  transform: translateX(-50%); /*Lo ubica en el lugar que se indica, en este caso el centro*/
  font-family: 'Times New Roman', Times, serif; /*La font del texto indicado*/
}
/* Texto adicional */   /*¿Para que es este pedazo de codigo?*/
.texto {
  color: #000; /*Le da color, en este caso, negro*/
  font-size: clamp(1rem, 1vw, 1rem); /*Ayuda que se modifique el tamaño del texto. Responsivo*/
  margin-top: 1rem; /*hace que el margen inferior sea responsivo. por alguna razon...*/
  text-align: center; /*Lo alinea al centro, o mas exactamente, hace lo mismo que la centralizacion de word*/
}

/* Usuario */
.usuario {
  position: absolute; /*lo mismo de los de arriba*/
  left: 0%; /*No le veo utilidad a esto... pero creo que ayuda a que el icono de usuario se ubique en la... derecha??*/
  transform: translateX(80%); /*lo ubica en la derecha, yeah*/
}
.usuario i {
  font-size: 3rem; /*Le da su tamaño"*/
  color: white;  /*Le da el color*/
}


/* =====================
   BODY 2
===================== */
.body2 {
  font-family: Arial, Helvetica, sans-serif; /*Mas de lo mismo, le da su diseño al font o lo q sea, en este caso a la font del body2*/ /*Ahora que miro bien, no tenemos body2 en ninguna parte*/
  background: url(../img/Imagen\ de\ WhatsApp\ 2025-07-21\ a\ las\ 07.14.08_b310ca33.jpg) 
              no-repeat center center/cover; /*El "no-repeat" hace lo que dice, impide que la imagen se repita por el fondo de la pagina. el "center center/cover" hace que la imagen este ubicada en el centro de la pagina y que cubra todo el espacio de ella*/
  min-height: 100vh;
  display: flex; /*es una propiedad de CSS que convierte un elemento en un contenedor flexible, permitiendo distribuir sus elementos hijos en una o varias líneas (filas o columnas) de manera dinámica y controlada*/
  justify-content: center; /*Justifica el contenido en el centro*/
  align-items: center; /*Alinea los elementos en el centro*/
  padding: 1rem; /*blah blah blah responsivo blah blah blah*/
  text-align: center; /*Aliena el texto en el centro*/
}

/* =====================
   FOOTER 👅
===================== */
footer {
  display: flex; /*es una propiedad de CSS que convierte un elemento en un contenedor flexible, permitiendo distribuir sus elementos hijos en una o varias líneas (filas o columnas) de manera dinámica y controlada*/
  justify-content: space-between; /*Justifica el contenido con un espacio entre medio*/
  align-items: center; /*Justifica los elementos en el centro*/
  background-color: #000000; /*Le da el color negro al footer*/
  background-image: url(../img/noise.png);
  padding: 2rem;  /*El espaciado entre toda la pagina y el footer. Responsivo*/
  flex-wrap: wrap; /*Sirve para que los elementos dentro de un contenedor flexible (display: flex) no se reduzcan infinitamente para caber en una sola línea, sino que pasen a una nueva línea (o varias líneas) si no hay suficiente espacio en la actual.*/
  width: 100%; /*Le da todo el ancho de la pantalla al footer.*/
  gap: 4rem; /*Se usa en CSS para establecer un espacio uniforme de 4rem entre los elementos hijos de un contenedor que utiliza Flexbox, Grid o diseños multicolumna.*/
  margin-bottom: -100%; /* hace que el footer se pegue al final */
  font-family: 'Times New Roman', Times, serif; /*No quiero volver a explicar esto*/
}
/*¿¿Esto siquiera modifica algo??*/
footer .pe{
  font-size: 1.2rem;
  color: #fff;
}

/* Texto central */
.stylefooter2 {
  color: white;
  font-size: clamp(3rem, 9vw, 4rem);
  font-weight: bold;
  margin: 5 auto;
  left: auto;
}
/*Son 3 footers diferentes debido a un error inesperado que nos paso en medio de la programacion en clase.*/
.stylefooter3 {
  color: white;
  font-size: clamp(3rem, 9vw, 4rem);
  font-weight: bold;
  margin: 5 auto;
  transform: translateX(-120%); /*NO CAMBIAR POR NADA EN EL MUNDO. PONE EL STYLE STUDIO DEL FOOTER (EL DE ACERCA DE NOSOTROS) EN LA IZQUIERDA */
}

/* Íconos */
.footer-icons {
  display: flex; /*es una propiedad de CSS que convierte un elemento en un contenedor flexible, permitiendo distribuir sus elementos hijos en una o varias líneas (filas o columnas) de manera dinámica y controlada*/
  gap: 3rem;
}

/*Funcion para modificar el tamaño y animacion de los iconos*/
.footer-icons a {
  font-size: 2rem;   /* íconos más grandes */
  color: white;
  transition: color 0.3s ease; /* animación más fluida */
}

/*Funcion para modificar el color de los iconos*/
.footer-icons a:hover {
  color: aliceblue;
}
.slogan-footer {
  font-size: 1rem;
  font-style: italic;
  margin-top: 5px;
  color: #ccc; /* gris suave */
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6); /* para que resalte */
}
/* =====================
   LOGIN PAGE
===================== */
body.bodycss {
  font-family: Arial, Helvetica, sans-serif;
  background: url("../img/Imagen de WhatsApp 2025-07-21 a las 07.14.08_b310ca33.jpg"); /*¿Porque el link no esta en azul como el resto?*/
  background-repeat: repeat;
  background-size: 34%;   /* llena la pantalla */
  background-attachment: fixed; /* fija la imagen */
  min-height: 100vh; /* ocupa toda la pantalla */
  display: flex; /*es una propiedad de CSS que convierte un elemento en un contenedor flexible, permitiendo distribuir sus elementos hijos en una o varias líneas (filas o columnas) de manera dinámica y controlada*/
  justify-content: center;
  align-items: center;
}

/* =====================
   CONTENIDO LOGIN
===================== */
.login {
  width: 100%;
  max-width: 350px;
  margin: auto;
}

.login-screen {
  background-color: rgba(0, 0, 0, 0.8); /* semitransparente */
  backdrop-filter: blur(10px); /*Le da ese pequeño difuminado al fondo atras de la caja, tambien en el register y en el header de las paginas :3*/
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.app-title {
  text-align: center;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}

.login-form {
  text-align: center;
}

.control-group {
  margin-bottom: 1rem;
}

/* =====================
   CAMPOS INPUT
===================== */
input {
  width: 100%;
  padding: 0.8rem;
  font-size: 1rem;
  font-weight: 400;
  border: 2px solid transparent;
  border-radius: 8px;
  text-align: center;
  background-color: #fff;
  transition: border 0.3s ease, box-shadow 0.3s ease; /*Animacion de transición*/
}

input:focus {
  border: 2px solid white; /*Cambia el color del box cuando se deja de escribir con el. creo*/
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

/* =====================
   BOTÓN
===================== */
.btn {
  display: block; /*transforma un elemento para que se comporte como un elemento de bloque, lo que significa que siempre ocupa todo el ancho disponible en su contenedor y comienza en una nueva línea, forzando a otros elementos a ir debajo o arriba de él.*/
  width: 100%;
  padding: 0.8rem;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 8px;
  border: none;
  background: white;
  color: black;
  cursor: pointer;
  transition: all 0.3s ease;
}
/*Le da la animacion de cuando se pasa el raton por encima y cambia de color*/
.btn:hover {
  background: black;
  color: white;
  border: 2px solid white;
}

/* =====================
   LINK EXTRA                                              ¿Para que era esto?
===================== */
.login-link {
  font-size: 0.9rem;
  color: #ccc;
  display: block; /*transforma un elemento para que se comporte como un elemento de bloque, lo que significa que siempre ocupa todo el ancho disponible en su contenedor y comienza en una nueva línea, forzando a otros elementos a ir debajo o arriba de él.*/
  margin-top: 1rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

.login-link:hover {
  color: white;
}

/* =====================
   REGISTRO
===================== */
body.bodyregister {
  font-family: Arial, Helvetica, sans-serif;
  background: url("../img/Imagen de WhatsApp 2025-07-21 a las 07.14.08_b310ca33.jpg") 
              repeat center center;
  background-size: 34%;
  background-attachment: fixed;
  min-height: 100vh;
  display: flex; /*ya esta explicado bruh*/
  justify-content: center;
  align-items: center;
}

.register {
  width: 100%;
  max-width: 400px;
  margin: auto;
}

.register-screen {
  background-color: rgba(0, 0, 0, 0.85); /* un poco más oscuro que el login */
  backdrop-filter: blur(10px); 
  padding: 2.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.7);
}

.register-title {
  text-align: center;
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}

.register-form {
  text-align: center;
}

.register-form .control-group {
  margin-bottom: 1rem;
}

.register-form input {
  width: 100%;
  padding: 0.9rem;
  font-size: 1rem;
  border: 2px solid transparent;
  border-radius: 8px;
  text-align: center;
  background-color: #fff;
  transition: border 0.3s ease, box-shadow 0.3s ease;
}

.register-form input:focus {
  border: 2px solid white;
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

.register-form .btn {
  display: block;
  width: 100%;
  padding: 0.9rem;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 8px;
  border: none;
  background: white;
  color: black;
  cursor: pointer;
  transition: all 0.3s ease;
}

.register-form .btn:hover {
  background: black;
  color: white;
  border: 2px solid white;
}

.register-link {
  font-size: 0.9rem;
  color: #ccc;
  display: block;
  margin-top: 1rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

.register-link:hover {
  color: white;
}

/* =====================
   HEADER
===================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem 2rem; 
  background: rgba(0, 0, 0, 0.5); /* fondo oscuro semi-transparente */
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center; /* logo centrado */
  align-items: center;
  z-index: 1000; /*Es una propiedad de CSS que define el orden de apilamiento de los elementos superpuestos en un espacio 3D, controlando qué elementos aparecen más cerca o más lejos del espectador, es decir, cuál está delante de cuál.*/ /*No cumple ninguna funcion aparente*/
}

/* Menú izquierda */
.header .nav {
  position: absolute;
  left: 2rem;
  display: flex;
  gap: 2rem;
}

.header .nav a {
  color: white;
  font-size: 1rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

.header .nav a:hover {
  color: white;
}

/* Logo centro */
.header .logo a {
  font-size: 2rem;
  font-weight: bold;
  color: rgb(255, 255, 255);
  mix-blend-mode: difference;
  text-decoration: none;
  font-family: 'Times New Roman', Times, serif;
}
.header .logo a:hover {
  color: rgb(255, 255, 255);
  text-decoration: none;  
}
  
/* Ícono usuario derecha */
.header .usuario {
  position: absolute;
  right: 2rem;
  font-size: 2rem;
}

.header .usuario a {
  color: white;
  transition: color 0.3s ease;
}

.header .usuario a:hover {
  color: white;
}

/* =====================
   ACERCA DE NOSOTROS
===================== */
.sobre-nosotros img {
  width: 1530px;   
  height: 730px;   
}

.sobre-nosotros {
  max-width: 1000px;
  margin: 5rem auto;
  padding: 2rem;
  background: #111;
  color: #fff;
  border-radius: 15px;
  text-align: center;
}

.sobre-nosotros h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: white;
}

.sobre-nosotros p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.vision-mision {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.caja {
  flex: 1 1 250px;
  background: #222;
  padding: 1.5rem;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.caja:hover {
  transform: translateY(-5px);
}

.caja h3 {
  font-size: 1.5rem;
  color: white;
  margin-bottom: 1rem;
}

.caja ul {
  list-style: none;
  padding: 0;
}

.caja li {
  margin: 0.5rem 0;
}

/* ===========================
LA VIDA LA VIDA ES UN CARRUSEL
============================== */
.slider-box {
  width: 400px;
  height: auto;
  margin: 50px auto 0;
  overflow: hidden;
  transform: translateY(-17%) translateX(-150%);
}

.slider-box ul {
  display: flex;
  padding: 0;
  width: 300%;
  animation: slide 5s infinite alternate ease-in-out;

}

.slider-box li {
  width: 100%;
  list-style: none;
  position: relative;
}

.slider-box img {
  width: 100%;
  height: 100%;

}

@keyframes slide {
  0% { margin-left: 0; }
  25% { margin-left: 0; }

  40% { margin-left: -100%; }
  65% { margin-left: -100%; }

  80% { margin-left: -200%; }
  100% { margin-left: -200%; }
}

@media(max-width:991px) {

  .slider-box{
    width: 340px;
  }
  
}

.texto{
  color: black;
  transform: translateX(65%) translateY(500%);
}

/* =======
Productos
========== */

/* Contenedor de todos los productos */
.container-items {
  display: grid;
   grid-template-columns: repeat(2, 1fr);
  margin-top: 90px;
  margin-left: 30px;
  margin-bottom: 30px;
  align-items: stretch;
}

/* Cada producto individual */
.item {
  border: 1px solid #ffffff;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  display: flex;
  max-width: 800px;  /* límite del tamaño del cuadro */
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  gap: 50px;
  align-items: center;
}

.item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

.item figure {  
  width: 200px;   /* ancho fijo para todas las imágenes */
  height: 200px;  /* alto fijo */
  overflow: hidden;
  flex-shrink: 0; /* evita que se encoja con flexbox */
}

.item img {
  width: 100%;  /* imagen ocupa todo el ancho del cuadro */
  height: 100%;
  object-fit: cover;  /* recorta manteniendo proporción */
  display: block;
}

.info-producto {
  display: flex;
  padding: 10px;
  text-align: left;
  justify-content: center;
  flex-direction: column;
}

.info-producto h2 {
  font-size: 1.2rem;
  margin: 10px 0;
  color: #000;
  align-items: center;
}

.price {
  font-size: 1.1rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}


/*================
Icono del carrito
=================*/
.icon-cart {
  width: 70px;
  height: 40px;
}

.icon-cart:hover{
  cursor: pointer; /*Cuando el cursor pasa por el icono, este cambia de forma*/
}

/* Contenedor principal del carrito */
.cart-container {
    position: relative;
    display: inline-block;
    margin: 20px;
}

/* Icono del carrito */
.cart-icon {
    position: relative;
    cursor: pointer;
    font-size: 24px;
    color: #333;
}

/* Contador de productos */
.cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff4757;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

/* Menú desplegable */
.cart-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 2px solid #000000;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    width: 500px;
    display: none;
    z-index: 1100;
    padding: 15px;
}

/* Mostrar menú al activar */
.cart-dropdown.active {
    display: block;
}

/* Lista de productos */
.cart-items {
    list-style: none;
    padding: 10px;
    max-height: 200px;
    overflow-y: auto;
}

.cart-items li {
    display: flex;
    flex-direction: column; /* apila en columna*/
    padding: 40px 0;
    border-bottom: 1px solid #000000;
    color: #000;
    font-size: 28px;
    font-family: 'Times New Roman', Times, serif;
}


/* Total del carrito */
.cart-total {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #030000;
    font-weight: bold;
    color: #000;
}

.checkout-btn {
  transform: translateX(30px);
  
}

/* Estilos de productos */
.products {
    display: flex;
    gap: 20px;
    padding: 20px;
}

.product {
    border: 1px solid #000000;
    padding: 15px;
    border-radius: 4px;
}

/*Modifica todos los botones*/
button {
  background: #222;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
  border: 2px solid #000;
  position: relative;
  transform: translateY(-0.1rem);
  width: 200px;
  margin-top: 20px;
}

button:hover {
  background: #ffffff;
  color: black;
  border: 2px solid #000;
}

.add-to-cart:hover {
    background: #ffffff;
}