:root {
  --color-principal: #193153;
  --color-secundario: #315d91;
  --color-fondo: #f5f7fa;
  --color-texto: #202b3c;
  --color-gris: #687386;
  --color-borde: #e2e7ee;
  --color-blanco: #ffffff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--color-fondo);
  color: var(--color-texto);
}

.contenedor {
  width: min(1180px, 92%);
  margin: auto;
}

/* ENCABEZADO */

.encabezado {
  background: var(--color-blanco);
  border-bottom: 1px solid var(--color-borde);
}

.encabezado-interior {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--color-principal);
  font-size: 21px;
  font-weight: bold;
}

.logo {
  width: 45px;
  height: 45px;
  object-fit: contain;
  display: none;
}

.estado-conexion {
  color: var(--color-gris);
  font-size: 13px;
}

/* PRESENTACIÓN */

.presentacion {
  padding: 55px 0 35px;
}

.etiqueta {
  color: var(--color-secundario);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
}

.presentacion h1 {
  margin: 10px 0;
  font-size: clamp(28px, 5vw, 42px);
  color: var(--color-principal);
}

.presentacion p:last-child {
  color: var(--color-gris);
  font-size: 16px;
}

/* BUSCADOR */

.herramientas {
  margin-bottom: 35px;
}

.buscador {
  max-width: 520px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: 10px;
  padding: 0 16px;
}

.buscador span {
  font-size: 25px;
  color: var(--color-gris);
}

.buscador input {
  width: 100%;
  height: 48px;
  border: none;
  outline: none;
  font-size: 15px;
  background: transparent;
}

/* CATEGORÍAS */

.categorias {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.categoria {
  border: 1px solid var(--color-borde);
  background: var(--color-blanco);
  color: var(--color-texto);
  border-radius: 20px;
  padding: 9px 17px;
  cursor: pointer;
}

.categoria:hover,
.categoria.activa {
  background: var(--color-principal);
  color: var(--color-blanco);
  border-color: var(--color-principal);
}

/* PRODUCTOS */

.seccion-productos {
  padding-bottom: 60px;
}

.titulo-seccion h2 {
  color: var(--color-principal);
  margin-bottom: 5px;
}

.titulo-seccion p {
  color: var(--color-gris);
  font-size: 14px;
}

.productos-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 22px;
}

.producto {
  background: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.producto:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(20, 40, 70, 0.08);
}

.producto-imagen {
  height: 250px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.producto-imagen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.imagen-vacia {
  color: #8995a7;
  font-size: 14px;
}

.producto-contenido {
  padding: 17px;
}

.producto-categoria {
  color: var(--color-secundario);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: bold;
}

.producto h3 {
  margin: 9px 0;
  font-size: 17px;
}

.producto-descripcion {
  color: var(--color-gris);
  font-size: 13px;
  line-height: 1.5;
  min-height: 38px;
}

.producto-precio {
  margin-top: 15px;
  font-size: 21px;
  font-weight: bold;
  color: var(--color-principal);
}

.producto-existencia {
  margin-top: 9px;
  font-size: 12px;
  color: #26834c;
}

.producto-existencia.agotado {
  color: #c0392b;
}

.etiqueta-destacado {
  display: inline-block;
  background: #fff3d7;
  color: #926100;
  font-size: 11px;
  font-weight: bold;
  padding: 5px 9px;
  border-radius: 12px;
}

/* MENSAJES */

.mensaje-estado {
  padding: 25px;
  text-align: center;
  color: var(--color-gris);
  background: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: 10px;
}

.mensaje-estado.oculto {
  display: none;
}

/* PIE */

.pie {
  background: var(--color-principal);
  color: white;
  text-align: center;
  padding: 24px;
  font-size: 13px;
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .productos-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .productos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .producto-imagen {
    height: 165px;
  }

  .producto-contenido {
    padding: 12px;
  }

  .producto h3 {
    font-size: 15px;
  }

  .producto-precio {
    font-size: 18px;
  }

  .presentacion {
    padding-top: 35px;
  }

  .estado-conexion {
    font-size: 11px;
    text-align: right;
  }
}

@media (max-width: 360px) {
  .productos-grid {
    grid-template-columns: 1fr;
  }
}
/* =================================
   MEJORAS VISUALES DEL CATÁLOGO
================================= */

:root {
  --color-principal: #172b4d;
  --color-secundario: #426b9a;
  --color-fondo: #f7f8fa;
}

/* Encabezado */

.encabezado {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.marca {
  letter-spacing: -0.4px;
}

/* Presentación */

.presentacion {
  padding-top: 65px;
  padding-bottom: 42px;
}

.presentacion h1 {
  letter-spacing: -1.2px;
  line-height: 1.15;
}

/* Buscador */

.buscador {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.025);
  transition: border-color 0.2s;
}

.buscador:focus-within {
  border-color: var(--color-secundario);
}

/* Categorías */

.categoria {
  transition: all 0.2s ease;
}

.categoria:hover {
  transform: translateY(-1px);
}

/* Tarjetas */

.producto {
  border-radius: 14px;
  border-color: #e8ebf0;
  box-shadow: 0 3px 12px rgba(20, 40, 70, 0.035);
}

.producto:hover {
  box-shadow: 0 12px 28px rgba(20, 40, 70, 0.10);
}

.producto-imagen {
  height: 250px;
  background: #f0f2f6;
}

.producto-imagen img {
  transition: transform 0.35s ease;
}

.producto:hover .producto-imagen img {
  transform: scale(1.04);
}

.imagen-vacia {
  font-size: 13px;
  color: #8b95a5;
}

.producto-contenido {
  padding: 19px;
}

.producto h3 {
  font-size: 17px;
  line-height: 1.4;
  color: #24334b;
}

.producto-descripcion {
  color: #788394;
  line-height: 1.6;
}

.producto-precio {
  font-size: 22px;
  letter-spacing: -0.4px;
  margin-top: 18px;
}

.producto-existencia {
  font-size: 12px;
  font-weight: 500;
}

/* Pie */

.pie {
  margin-top: 30px;
  padding: 30px 15px;
}

/* Adaptación móvil */

@media (max-width: 650px) {
  .presentacion {
    padding-top: 40px;
  }

  .producto-imagen {
    height: 180px;
  }

  .producto-contenido {
    padding: 14px;
  }
}
/* =================================
   CARRITO DE COMPRAS
================================= */

.seccion-carrito {
  padding: 35px 0 65px;
  border-top: 1px solid var(--color-borde);
}

.lista-carrito {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.carrito-vacio {
  background: white;
  border: 1px solid var(--color-borde);
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  color: var(--color-gris);
}

.item-carrito {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  background: white;
  border: 1px solid var(--color-borde);
  border-radius: 12px;
  padding: 16px;
}

.item-carrito-info {
  flex: 1;
}

.item-carrito-info h3 {
  margin: 0 0 7px;
  font-size: 15px;
}

.item-carrito-info p {
  margin: 0;
  color: var(--color-gris);
  font-size: 13px;
}

.controles-cantidad {
  display: flex;
  align-items: center;
  gap: 10px;
}

.controles-cantidad button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-borde);
  border-radius: 7px;
  background: white;
  cursor: pointer;
  font-size: 18px;
}

.controles-cantidad button:hover {
  background: var(--color-fondo);
}

.cantidad-actual {
  min-width: 22px;
  text-align: center;
  font-weight: bold;
}

.boton-eliminar {
  border: none;
  background: transparent;
  color: #c0392b;
  cursor: pointer;
  font-size: 13px;
}

.carrito-resumen {
  margin-top: 20px;
  padding: 20px;
  background: white;
  border: 1px solid var(--color-borde);
  border-radius: 12px;
}

.carrito-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 17px;
}

.carrito-total strong {
  color: var(--color-principal);
  font-size: 24px;
}

.boton-vaciar {
  margin-top: 18px;
  padding: 10px 16px;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  background: white;
  color: #c0392b;
  cursor: pointer;
}

.boton-vaciar:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* BOTÓN AGREGAR */

.boton-agregar {
  width: 100%;
  margin-top: 14px;
  padding: 11px;
  border: none;
  border-radius: 8px;
  background: var(--color-principal);
  color: white;
  font-weight: bold;
  cursor: pointer;
}

.boton-agregar:hover {
  background: var(--color-secundario);
}

.boton-agregar:disabled {
  background: #aeb6c2;
  cursor: not-allowed;
}

@media (max-width: 500px) {
  .item-carrito {
    flex-wrap: wrap;
  }

  .controles-cantidad {
    width: 100%;
    justify-content: flex-start;
  }
}
/* ALINEAR LOS BOTONES DE LAS TARJETAS */

.producto {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.producto-contenido {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.producto-descripcion {
  min-height: 38px;
}

.boton-agregar {
  margin-top: auto;
}

/* CORREGIR BOTÓN ELIMINAR */

.controles-cantidad .boton-eliminar {
  width: auto;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #f0d5d5;
  border-radius: 7px;
  background: #ffffff;
  color: #c0392b;
  font-size: 12px;
  white-space: nowrap;
}
/* BOTÓN DE WHATSAPP */

.boton-whatsapp {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 13px 18px;
  border: none;
  border-radius: 8px;
  background: #168b55;
  color: white;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}

.boton-whatsapp:hover:not(:disabled) {
  background: #116f43;
}

.boton-whatsapp:disabled {
  background: #aeb6c2;
  cursor: not-allowed;
}