/* Mueble Hogar — base común (marca) */
:root {
  --azul: #00385D;
  --azul-2: #0B4160;
  --azul-claro: #E6EEF3;
  --crema: #FDF9F8;
  --crema-2: #F6F0EA;
  --arena: #EFE7DD;
  --oliva: #ADA785;
  --oliva-osc: #7F7A58;
  --oliva-claro: #EEECE2;
  --dorado: #C99B3D;
  --tinta: #1C2731;
  --gris: #66707A;
  --gris-claro: #98A0A8;
  --linea: #E8DFD5;
  --blanco: #FFFFFF;
  --ok: #2E7D5B;
  --ok-claro: #E3F2EA;
  --alerta: #B7791F;
  --alerta-claro: #FBF0DC;
  --error: #B4443A;
  --error-claro: #F8E5E2;
  --serif: 'Bodoni Moda', 'Didot', 'Playfair Display', Georgia, serif;
  --sans: 'Jost', 'Futura', 'Segoe UI', system-ui, sans-serif;
  --radio: 14px;
  --sombra: 0 1px 2px rgba(0, 56, 93, .06), 0 6px 22px rgba(0, 56, 93, .08);
  --sombra-alta: 0 10px 40px rgba(0, 35, 60, .22);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Letra de títulos (Bodoni): versión con trazos finos más gruesos para que se lea mejor */
html { font-optical-sizing: none; font-variation-settings: "opsz" 18; }
body {
  font-family: var(--sans);
  color: var(--tinta);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.45;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; }
.serif { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; }
.ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic-sm { width: 16px; height: 16px; }
.ic-lg { width: 28px; height: 28px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 22px; border-radius: 999px;
  background: var(--azul); color: #fff; font-weight: 500; font-size: 16px; letter-spacing: .01em;
  transition: transform .12s ease, background .2s ease, opacity .2s; text-decoration: none;
}
.btn:active { transform: scale(.97); }
.btn:hover { background: var(--azul-2); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-sec { background: transparent; color: var(--azul); box-shadow: inset 0 0 0 1.5px var(--azul); }
.btn-sec:hover { background: var(--azul-claro); }
.btn-oliva { background: var(--oliva); color: #fff; }
.btn-oliva:hover { background: var(--oliva-osc); }
.btn-ok { background: var(--ok); }
.btn-ok:hover { background: #256a4c; }
.btn-chico { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-ancho { width: 100%; }

.etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--oliva); color: #fff; font-size: 12px; font-weight: 500;
  padding: 4px 10px; border-radius: 4px; letter-spacing: .02em;
}
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.b-ok { background: var(--ok-claro); color: var(--ok); }
.b-alerta { background: var(--alerta-claro); color: var(--alerta); }
.b-error { background: var(--error-claro); color: var(--error); }
.b-azul { background: var(--azul-claro); color: var(--azul); }
.b-oliva { background: var(--oliva-claro); color: var(--oliva-osc); }
.b-gris { background: #EEF0F2; color: var(--gris); }

.giro { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: giro .8s linear infinite; display: inline-block; flex: none; }
@keyframes giro { to { transform: rotate(360deg); } }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.aparecer { animation: aparecer .35s ease both; }

/* Sello de Cashea */
.logo-cashea { display: inline-flex; align-items: center; background: #FFE600; color: #111; font-family: var(--sans); font-weight: 700; letter-spacing: -.03em; font-size: 15px; line-height: 1.2; padding: 2px 9px 3px; border-radius: 6px; text-transform: none; font-style: normal; }
.logo-cashea.grande { font-size: 26px; padding: 4px 14px 6px; border-radius: 10px; }

/* Logo (monograma MH + nombre) */
.logo-mh { display: inline-flex; align-items: center; gap: 10px; color: var(--azul); text-decoration: none; transition: color .3s; }
.logo-mh.claro { color: #fff; }
.logo-mh-ico { display: block; width: auto; flex: none; }
.logo-mh-txt b { display: block; font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1; letter-spacing: .01em; }
.logo-mh-txt small { display: block; font-size: 8.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--oliva-osc); margin-top: 4px; font-weight: 500; }
.logo-mh.claro small { color: var(--dorado); }

.monograma { display: inline-grid; place-items: center; border-radius: 999px; background: var(--azul); color: #fff; font-family: var(--serif); }
.monograma svg { display: block; }