/* MonsterDrop — estilos base. Móvil primero, ligero, con variables. */

:root {
	--md-color-bg: #ffffff;
	--md-color-fg: #1a1a1a;
	--md-color-muted: #6b7280;
	--md-color-primary: #e11d48;
	--md-color-primary-dark: #be123c;
	--md-color-border: #e5e7eb;
	--md-color-accent: #16a34a;

	--md-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--md-radius: 10px;
	--md-gap: 1rem;
	--md-container: 1200px;

	--md-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--md-font);
	color: var(--md-color-fg);
	background: var(--md-color-bg);
	line-height: 1.55;
}

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

a { color: var(--md-color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/*
 * Capa mínima de marca compartida entre las 16 plantillas de producto
 * (auditoría UX, tema #6). Cada plantilla define sus propios colores,
 * tipografía y radios con su propio prefijo (--lc-*, --mc-*, --bd-*...) y
 * eso NO se toca acá — el riesgo de romper alguna visualmente no vale la
 * mejora estética. Esto es, a propósito, solo lo que ninguna de las 16
 * plantillas define hoy por su cuenta, así que no compite con nada:
 * - Un estado de foco consistente y accesible al navegar con teclado
 *   (hoy varía "lo que el navegador traiga por defecto" de una plantilla a
 *   otra, porque ninguna define el suyo propio).
 * - Selección de texto y scroll a anclas (#getOrder, FAQ, etc.) con el
 *   mismo criterio en toda la tienda.
 * `:where()` le da especificidad cero al selector: si una plantilla llega a
 * definir su propio estado de foco más adelante, gana ella sin necesitar
 * !important acá.
 */
html { scroll-behavior: smooth; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--md-color-primary);
	outline-offset: 2px;
}

::selection {
	background: var(--md-color-primary);
	color: #fff;
}

.md-container {
	width: 100%;
	max-width: var(--md-container);
	margin-inline: auto;
	padding-inline: var(--md-gap);
}

/* Accesibilidad */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.md-skip-link:focus {
	position: fixed;
	top: .5rem; left: .5rem;
	width: auto; height: auto;
	clip: auto;
	padding: .5rem .75rem;
	background: var(--md-color-fg);
	color: #fff;
	border-radius: var(--md-radius);
	z-index: 1000;
}

/* Header */
.md-header { border-bottom: 1px solid var(--md-color-border); }
.md-header__inner {
	max-width: var(--md-container);
	margin-inline: auto;
	padding: .75rem var(--md-gap);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--md-gap);
}
.md-header__title { font-weight: 700; font-size: 1.25rem; color: var(--md-color-fg); }

.md-menu {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
}
.md-menu a { color: var(--md-color-fg); }

/* Footer */
.md-footer {
	margin-top: 3rem;
	border-top: 1px solid var(--md-color-border);
	background: #fafafa;
}
.md-footer__inner {
	max-width: var(--md-container);
	margin-inline: auto;
	padding: 2rem var(--md-gap);
}
.md-footer__copy { color: var(--md-color-muted); font-size: .9rem; }

/* Botones utilitarios */
.md-btn {
	display: inline-block;
	padding: .8rem 1.4rem;
	border-radius: var(--md-radius);
	background: var(--md-color-primary);
	color: #fff !important;
	font-weight: 600;
	text-align: center;
	border: 0;
	cursor: pointer;
	transition: background .15s ease;
}
.md-btn:hover { background: var(--md-color-primary-dark); text-decoration: none; }