/* Reset y variables */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root{
  /* Styles */
  --degrade-del-logo:  linear-gradient(180deg,
  #76adb9 0%,
  #8d84bb 30%,
  #ac2321d2 100%
  );/**/
  /*--degrade-del-logo:  linear-gradient(180deg, #6BA7C9 0%, #6A91C6 25%, #6C7CC1 50%, #855D90 75%, #B8282F 100%); /* implementacion de degradado en el logo */
  --HeaderFooter-bg: #ac2321d2; /* fondo header y footer */
  --HeaderFooter-text-1: #fff;
  --HeaderFooter-text-2: #000;
  --HeaderFooter-menu-hover:#00ccff;
  --redes--sociales: #fff;
  --banner-btn : #ac2321;
  --banner-btn-hover: #ff4b48;
  --banner-text : #fff;
  --banner-text-hover : #00ccff;

  /* Productos: Home - vista */
  --carrusel-bg: #d8d8d8c0;
  --carrusel-btn: #00000080;
  --carrusel-btn-hover: #57575780;
  --carrusel-text: #fff ;
  --carrusel-text-hover: #fff ;
  
  /* Productos */
  --producto-bg : #d8d8d852 ;
  --producto-bg-hover : #d8d8d890 ;
  --producto-text-1 : #fff ;
  --producto-text-2 : #000 ;
  --producto-text-3 : #343434 ;
  --producto-text-4 : #ff0000;
  --producto-btn : #e83330 ;
  --producto-btn-hover : #ac2321;

  /* Formulario: Producto, Contacto y Carrito */
  --formulario-bg: #d8d8d852 ;
  --formulario-bg-hover: #d8d8d890 ;
  --formulario-text-1 : #000 ;
  --formulario-text-2 : #343434 ;
  --formulario-text-3 : #ff0000 ;
  --formulario-text-4 : #fff ;
  --formulario-text-hover : #00ccff ;
  --formulario-btn-1 : #000 ;
  --formulario-btn-2 : #00ccff ;
  --formulario-btn-3 : #ac2321 ;
  --formulario-btn-hover: #e83330;

  /* Contacto */
  --contacto-text-1: #000;
  --contacto-text-2: #fff;
  --contacto-text-3: #e83330;

  /* Carrito: icono y compra */
  --carrito-bg-ico: #000;
  --carrito-text-ico: #fff; 
  --carrito-text-hover-ico: #00ccff;

  --carrito-bg: #d8d8d84b;
  --carrito-bg-hover: #000;
  --carrito-text: #000;
  --carrito-text-1: #ac2321;
  --carrito-text-hover: #fff;
  --carrito-btn-1: #00ccff;
  --carrito-btn-2: #0070da;

  --btn-editar: #36db5d;
  --btn-editar-hover: #00a827;
  --btn-editar-text: #000;
  --btn-editar-text-hover: #fff;
  --btn-eliminar: #fd5465;
  --btn-eliminar-hover: #d30c20;
  --btn-eliminar-text: #000;
  --btn-eliminar-text-hover: #fff;
  --btn-compra: #00ccff;
  --btn-compra-hover: #0070da;
  --btn-compra-text: #000;
  --btn-compra-text-hover: #fff;

  --modal-bg : #b50d1e;
  --modal-text : #000;
  --modal-text-2 : #fff;
  --modal-text-hover : #fff;
  --modal-btn :#0070da;
  --modal-btn-hover : #00ccff;

  --modal-wsp: #008430;
  --modal-email: #070084; 

  --modal-reenviar-btn:#db6b0f;; /* botón */
  --modal-reenviar-btn-hover:#d47d35;

  --modal-vaciar-btn:#d30c20;; /* botón */
  --modal-vaciar-btn-hover:#fd5465; 

  --modal-error-email: #a82330;
  --modal-corret-email: #008430;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  background:var(--degrade-del-logo);
}

/* Main toma todo el espacio disponible */
main {
  flex: 1; /* fuerza a ocupar todo el espacio entre header y footer */
  padding-top: 70px; /* header es fijo */
  padding-bottom: 1rem; /* opcional, espacio antes del footer */
}

section{
  background-color: transparent;
}

/* ====================================
HEADER
==================================== */

.header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: var(--HeaderFooter-bg);
  z-index: 1000;
}

/* LOGO */

.mini-logo{
  width: 70px;
  height: 30px;
  display: flex;
  align-items: center;
}

.logo{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* BOTÓN HAMBURGUESA */

#menu-icon{
  font-size: 1.8rem;
  cursor: pointer;
  color: var(--HeaderFooter-text-1);
  display: block;
}

#menu-icon:hover{
  color: var(--HeaderFooter-menu-hover);
}

/* NAVBAR MOBILE */

.navbar{
  list-style: none;
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  background: var(--HeaderFooter-bg);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 20px 0;
  box-shadow: 0 5px 10px rgba(0,0,0,.15);
}

.navbar.active{
  display: flex;
}

.navbar a{
  text-decoration: none;
  color: var(--HeaderFooter-text-1);
  font-size: 1rem;
  font-weight: 600;
  position: relative;
  transition: .3s;
}

.navbar a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--HeaderFooter-menu-hover);
  transition: .3s;
}

.navbar a:hover{
  color: var(--HeaderFooter-menu-hover);
}

.navbar a:hover::after{
  width: 100%;
}
/* ======= REDES SOCIALES ======= */

.social-icons{
  display:flex;
  justify-content: center;
  gap:10px;
}

.social-icons a{
  font-size: 1.6rem;
  transition: transform 0.3s ease, color 0.3s ease;
  color: var(--redes--sociales);
}

.social-icons a:hover{
  transform:scale(1.4);
}


.fa-square-facebook:hover{
  color:#1877f2;
}

.fa-square-instagram:hover{
  color:#e440d1;
}

.fa-square-whatsapp:hover{
  color:#25d366;
}

/* ======= BANNER ======= */
.opciones{
  position:relative;
  width:100%;
  min-height:125px;   /* ya no es altura fija, es un mínimo */
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 20px 15px;  /* aire arriba/abajo cuando crece */
}

.banner{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

/* opcional: oscurece un poco la imagen para que el texto de los botones resalte siempre */
.opciones::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,0,0,0.25);
  z-index:0;
}

/* ======= BOTONES ======= */
.categoria-botones{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  max-width: 900px;
}

.cat-btn{
  padding: 8px 14px;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  background-color: var(--banner-btn);
  color: var(--banner-text);
  font-size: 0.72rem;
  padding: 5px 8px;
  white-space: nowrap;
  transition: 0.3s;
}

.cat-btn:hover{
  background-color: var(--banner-btn-hover);
  color: var(--banner-text-hover);
}

.cat-btn--todos{
  font-weight: bold;
}

.cat-btn .full{ display:none; }
.cat-btn .short{ display:inline; }

/* ======= CARRITO FLOTANTE ======= */

.carrito-ico{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:999;
}

.icono-car{
  position:relative;
  display:flex;
  text-decoration:none;
}

.icono-car i{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
  font-size: 1.2rem;
  background-color: var(--carrito-bg-ico); /* holor */
  color: var(--carrito-text-ico); /* holor */
}

.icono-car:hover i{
  transform:scale(1.1);
  color: var(--carrito-text-hover-ico)
}

.carrito-cantidad {
  position: absolute;
  top: -10px;
  right: -10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* que no interfiera con el click */
  color: var(--carrito-text-ico); /* holor */
  font-size: 1rem;
  font-weight: bold;
}

/* ======= FOOTER ======= */

footer{
  background-color: var(--HeaderFooter-bg); /* holor */
  color: var(--HeaderFooter-text-1); /* holor */
  padding: 15px 0;
  text-align: center;
}

footer .info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.info2{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.mini-mapa {
  width: 220px;
  height: 150px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.25);
}
.mini-mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.mini-mapa p{
  margin-bottom:8px;
  font-weight:600;
}

footer > p {
  color: var(--HeaderFooter-text-1); /* 123holor */
  font-size: 1rem;
  font-weight: bold;
  margin: 5px;
  opacity: 0.9;
}

/* === A partir de 425px (móviles grandes / pequeños tablets) === */
@media (min-width: 425px) {
  .social-icons a {
    font-size: 1.8rem;
  }
  .navbar a {
    font-size: 1.4rem;
  }
  .categoria-botones{
    gap: 10px;
  }
  .cat-btn{
    font-size: 0.8rem;
    padding: 6px 10px;
  }
  footer .info {
    font-size: 0.9rem;
  }
  footer > p {
    font-size: 0.7rem;
  }
  .carrito-cantidad {
    font-size: 1rem;
  }
  .icono-car i{
    font-size: 1.2rem;
  }
  
  /* ==== FOOTER ====*/
  footer .info {
    flex-direction: row; /* fila: info a la izquierda, mapa derecha */
    justify-content: space-around;
    align-items: center;
    gap: 20px;
  }
  .info2 {
    align-items: center;
  }
  .mini-mapa {
    margin-top: 0;
  }
  /* Hover/active/focus accesibles */
  .icono-car:hover i{
    transform: translateY(-1px) scale(1.2);
    box-shadow: 0 8px 18px rgba(0,0,0,.25);
    background: #1a1a1a; /* 123holor */
  }
  .icono-car:active i{
    transform: scale(0.97);
  }
  .icono-car:focus-visible i{
    outline: 2px solid #fff;
    outline-offset: 3px;
  }
}

/* === A partir de 768px (tablets horizontales / laptops chicos) === */
@media (min-width: 768px) {
  #menu-icon{
    display:none;
  }

  .navbar{
    position: static;
    width: auto;
    padding: 0;
    display: flex !important;
    flex-direction: row;
    gap: 30px;
    background: transparent;
    box-shadow: none;
  }

  header {
    padding: 0 40px;
  }
  .social-icons a {font-size: 2.2rem;}

  .navbar a {
    font-size: 1.5rem;
  }
  .cat-btn{
    font-size: 0.95rem;
    padding: 8px 14px;
  }
  .cat-btn .full{ display:inline; }
  .cat-btn .short{ display:none; }
  footer .info {
    font-size: 0.9rem;
  }
  footer > p {
    font-size: 0.7rem;
  }
  .carrito-cantidad {
    font-size: 1rem;
  }
  .icono-car i{
    font-size: 1.2rem;
  }
  /*=== FOOTER ===*/
  .mini-mapa {
    width: 250px;
    height: 180px;
  }
}