/* Mi Tienda — Hoja compartida de la web (Manual de Marca v1.0, docs/Manual_Marca_MiTienda/v1.0).
   La usa la portada. Los colores salen de ../tokens-v1.css (GENERADO por el build del
   manual): aquí no se inventa color. Se sirve desde /marca/web/. */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fuentes/inter-var.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fuentes/jetbrainsmono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fuentes/jetbrainsmono-700.woff2') format('woff2'); }

:root {
  --mt-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mt-mono-f: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --mt-r-pill: 999px;
  --mt-r-card: 16px;
  --mt-ease: cubic-bezier(.2, .7, .2, 1);
  --mt-borde-oscuro: rgba(250, 250, 249, .1);
  --mt-borde-oscuro-fuerte: rgba(250, 250, 249, .22);
}

.mt-saltar { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--mt-etiqueta); color: var(--mt-noche); padding: .6rem 1rem; border-radius: .5rem; font-weight: 700; text-decoration: none; }
.mt-saltar:focus { top: 1rem; }

.mt-marca { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.mt-marca img { display: block; height: 28px; width: auto; }

.mt-eyebrow { font-family: var(--mt-mono-f); font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--mt-etiqueta); margin: 0 0 .8rem; }

.mt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px;
  padding: .7rem 1.4rem; border-radius: var(--mt-r-pill); font-family: var(--mt-sans); font-weight: 700; font-size: .95rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .2s var(--mt-ease), box-shadow .2s var(--mt-ease), background-color .2s;
}
/* Botón principal: Vitrina Honda con texto blanco, 5,47 : 1 (manual, cap. 04). La Vitrina sola no llega. */
.mt-btn-marca { background: var(--mt-vitrina-honda); color: #fff; }
.mt-btn-marca:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(13, 148, 136, .3); color: #fff; }
.mt-btn-borde { background: transparent; color: var(--mt-humo); border-color: var(--mt-borde-oscuro-fuerte); }
.mt-btn-borde:hover { border-color: var(--mt-etiqueta); color: #fff; }
.mt-btn:focus-visible, .mt-enlace:focus-visible { outline: 2px solid var(--mt-etiqueta); outline-offset: 3px; }

/* Métodos HTTP: color + palabra, texto Tinta (cap. 04) */
.mt-metodo { display: inline-flex; align-items: center; padding: .15rem .7rem; border-radius: var(--mt-r-pill); font-family: var(--mt-mono-f); font-size: .78rem; font-weight: 700; color: var(--mt-tinta); }
.mt-metodo-get { background: var(--mt-get); } .mt-metodo-post { background: var(--mt-post); } .mt-metodo-delete { background: var(--mt-delete); }

.mt-pie { border-top: 1px solid var(--mt-borde-oscuro); padding: 3rem 1rem 2.5rem; color: var(--mt-ceniza); font-size: .9rem; background: var(--mt-noche); }
.mt-pie-in { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between; align-items: flex-start; }
.mt-pie nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.mt-pie a { color: var(--mt-humo); text-decoration: none; }
.mt-pie a:hover { color: var(--mt-papel); }
.mt-pie p { margin: .6rem 0 0; max-width: 32rem; line-height: 1.55; }
.mt-pie p a { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .mt-btn, .mt-btn:hover { transition: none; transform: none; }
}