/* ============================================================
   Moriah Technology — Sistema de diseño
   Paleta: azul de marca + neutros + acento
   ============================================================ */

:root {
  /* Marca */
  --azul-900: #0a2a66;
  --azul-800: #0d3a8a;
  --azul-700: #1150b4;
  --azul-600: #1a63e0;
  --azul-500: #2f7bf5;
  --azul-100: #e7f0ff;
  --azul-50: #f2f7ff;

  /* Neutros */
  --tinta: #0b1220;
  --gris-700: #475069;
  --gris-500: #737e9c;
  --gris-300: #d7dcea;
  --gris-200: #e7ebf4;
  --gris-100: #f2f4fa;
  --blanco: #ffffff;

  /* Acentos funcionales */
  --exito: #12a150;
  --alerta: #e0790b;
  --peligro: #d63a3a;

  /* Semántica */
  --bg: #f4f7fd;
  --superficie: var(--blanco);
  --texto: var(--tinta);
  --texto-suave: var(--gris-700);
  --borde: var(--gris-200);
  --primario: var(--azul-600);
  --primario-fuerte: var(--azul-800);

  --radio: 14px;
  --radio-sm: 10px;
  --sombra-sm: 0 1px 2px rgba(10, 42, 102, 0.06), 0 1px 3px rgba(10, 42, 102, 0.05);
  --sombra: 0 6px 20px rgba(10, 42, 102, 0.08);
  --sombra-lg: 0 18px 48px rgba(10, 42, 102, 0.14);

  --contenedor: 1200px;
  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --escala-texto: 0.94;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--texto);
  background: var(--bg);
  /* line-height: 1.5; */
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.contenedor {
  width: 100%;
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: 17px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 11px 20px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:active {
  transform: translateY(1px);
}
.btn-primario {
  background: var(--primario);
  color: var(--blanco);
  box-shadow: 0 6px 16px rgba(26, 99, 224, 0.28);
}
.btn-primario:hover {
  background: var(--azul-700);
}
.btn-claro {
  background: var(--blanco);
  color: var(--primario-fuerte);
}
.btn-claro:hover {
  background: var(--azul-50);
}
.btn-contorno {
  background: transparent;
  border-color: var(--gris-300);
  color: var(--texto);
}
.btn-contorno:hover {
  border-color: var(--primario);
  color: var(--primario);
}
.btn-bloque {
  width: 100%;
}

/* ---------- Chips / etiquetas ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  line-height: 1;
}
.chip-online {
  background: var(--azul-100);
  color: var(--azul-800);
}
.chip-fisica {
  background: #e9f7ef;
  color: var(--exito);
}
.chip-agotado {
  background: #fdecec;
  color: var(--peligro);
}
.chip-descuento {
  background: var(--peligro);
  color: var(--blanco);
}
.chip-oferta {
  background: #fff0f0;
  color: var(--peligro);
  border: 1px solid #ffd4d4;
}

/* Utilidades */
.seccion {
  padding-block: 15px;
}
.seccion-cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.seccion-titulo {
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.seccion-sub {
  color: var(--texto-suave);
  margin: 4px 0 0;
  font-size: 14px;
}
.enlace-ver {
  color: var(--primario);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.enlace-ver:hover {
  color: var(--azul-800);
}

/* Estados y cabeceras reutilizables para los listados del catálogo. */
.categoria-cabecera {
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--borde);
}

.catalogo-hero {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 19px 23px;
  border: 1px solid var(--borde);
  border-left: 4px solid var(--primario);
  border-radius: 13px;
  background: var(--blanco);
  box-shadow: var(--sombra-sm);
}
.catalogo-hero .seccion-titulo { margin: 0 0 5px; color: var(--azul-900); font-size: clamp(20px, 2.2vw, 27px); line-height: 1.2; }
.catalogo-hero .seccion-sub { margin: 0; color: var(--texto-suave); font-size: 12px; }.catalogo-hero .seccion-sub:first-child { margin-bottom: 5px; color: var(--primario); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.catalogo-hero .categoria-cantidad { flex: none; padding: 6px 9px; border-radius: 999px; background: var(--azul-50); color: var(--primario); font-size: 11px; }
@media (max-width: 760px) {
  .seccion { padding-block: 8px; }
  .categoria-cabecera { margin-bottom: -12px; padding-bottom: 0; border-bottom: 0; }
  .catalogo-hero { align-items: flex-start; padding: 10px 12px; border-left-width: 3px; border-radius: 10px; }
  .catalogo-hero .categoria-cantidad { display: none; }
  .catalogo-hero .seccion-titulo { margin: 0; font-size: 19px; }
  .catalogo-hero .seccion-sub:first-child { margin-bottom: 2px; font-size: 9px; }
  .catalogo-hero .seccion-sub:last-child { display: none; }
}

.categoria-cantidad {
  color: var(--texto-suave);
  font-size: 14px;
  white-space: nowrap;
}

.categoria-estado {
  margin-top: 22px;
  padding: 28px 20px;
  border: 1px dashed var(--gris-300);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--texto-suave);
  text-align: center;
}

.categoria-estado[hidden] { display: none; }

/* Contadores compartidos del encabezado: mismo aspecto en todo el sitio. */
.contador-carrito,
.contador-favoritos {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid var(--blanco);
  border-radius: 999px;
  background: var(--peligro);
  color: var(--blanco);
  font-size: 10px;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
  z-index: 3;
}

/* Oferta centrada: la primera descubre productos variados y luego acompaña el interés del visitante. */
body.anuncio-activo::after { position: fixed; inset: 0; z-index: 140; content: ""; background: rgba(4, 18, 45, .42); backdrop-filter: blur(2px); }
.anuncio-oferta { position: fixed; top: 50%; left: 50%; z-index: 150; display: grid; grid-template-columns: minmax(155px, 39%) minmax(0, 1fr); width: min(570px, calc(100vw - 32px)); min-height: 255px; overflow: hidden; border: 1px solid #d7e3f3; border-radius: 22px; background: #fff; box-shadow: 0 25px 70px rgba(20, 49, 91, .3); transform: translate(-50%, -50%); animation: anuncio-entra .42s cubic-bezier(.2, .9, .25, 1) both; }
.anuncio-cerrar { position: absolute; top: 10px; right: 11px; z-index: 2; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #dce5f1; border-radius: 50%; background: #fff; color: #334e72; font-size: 21px; line-height: 1; cursor: pointer; }
.anuncio-imagen { display: grid; min-height: 255px; place-items: center; padding: 22px; background: radial-gradient(circle at 40% 35%, #fff 0, #f0f6ff 45%, #dfeeff 100%); }
.anuncio-imagen img { width: 100%; height: 100%; max-height: 212px; object-fit: contain; mix-blend-mode: multiply; }
.anuncio-contenido { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding: 34px 46px 28px 27px; }
.anuncio-contenido > span { padding: 5px 8px; border-radius: 99px; background: #fff0e3; color: #d75d08; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.anuncio-contenido strong { display: -webkit-box; margin: 11px 0 6px; overflow: hidden; color: #112c50; font-size: 20px; line-height: 1.22; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.anuncio-contenido small { color: #637491; font-size: 11px; font-weight: 700; }
.anuncio-precio { display: grid; gap: 2px; margin-top: auto; }.anuncio-precio b { color: #1763b3; font-size: 24px; }.anuncio-precio em { color: #16834a; font-size: 10px; font-style: normal; font-weight: 800; }
.anuncio-contenido > div { display: flex; gap: 9px; margin-top: 17px; }
.anuncio-contenido a, .anuncio-contenido button { padding: 10px 12px; border: 1px solid #1763b3; border-radius: 8px; background: #fff; color: #1763b3; font: inherit; font-size: 12px; font-weight: 750; line-height: 1; text-decoration: none; cursor: pointer; }
.anuncio-contenido button { background: #1763b3; color: #fff; }
@keyframes anuncio-entra { from { opacity: 0; transform: translate(-50%, -45%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@media (max-width: 560px) { .anuncio-oferta { grid-template-columns: 112px minmax(0, 1fr); min-height: 192px; } .anuncio-imagen { min-height: 192px; padding: 13px; } .anuncio-contenido { min-height: 192px; padding: 25px 37px 18px 17px; } .anuncio-contenido strong { font-size: 15px; -webkit-line-clamp: 2; } .anuncio-contenido b { font-size: 18px; } .anuncio-contenido > div { gap: 6px; margin-top: 12px; } .anuncio-contenido a, .anuncio-contenido button { padding: 8px; font-size: 10px; } }