/* ==========================================================================
   Jojismi — Base: reset ligero, tipografía, elementos, botones.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--jj-font-ui);
	font-size: 16px;
	line-height: 1.6;
	color: var(--jj-ink);
	background: var(--jj-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s var(--jj-ease); }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
	font-family: var(--jj-font-head);
	font-weight: 500;
	line-height: 1.15;
	color: var(--jj-ink);
	margin: 0 0 .5em;
	letter-spacing: -0.01em;
}

p { margin: 0 0 1rem; }

::selection { background: var(--jojismi-pink-soft); color: var(--jojismi-pink-deep); }

/* Accesibilidad ---------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.jj-skip {
	position: absolute; left: -999px; top: 0; z-index: 1000;
	background: var(--jj-accent); color: #fff; padding: .75rem 1.25rem;
	border-radius: 0 0 var(--jj-radius-sm) 0;
}
.jj-skip:focus { left: 0; }

:focus-visible {
	outline: 3px solid var(--jojismi-aqua);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Contenedor ------------------------------------------------------------- */
.jj-container {
	width: 100%;
	max-width: var(--jj-maxw);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.jj-main { min-height: 50vh; }

/* Botones ---------------------------------------------------------------- */
.jj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .8rem 1.5rem;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font-weight: 500;
	font-size: .95rem;
	line-height: 1;
	background: var(--jojismi-soft-gray);
	color: var(--jj-ink);
	transition: transform .18s var(--jj-ease), background .2s var(--jj-ease), box-shadow .2s var(--jj-ease), border-color .2s var(--jj-ease);
	text-align: center;
}
.jj-btn:hover { transform: translateY(-1px); }
.jj-btn:active { transform: translateY(0); }

.jj-btn--primary {
	background: var(--jj-accent);
	color: #fff;
	box-shadow: 0 6px 18px rgba(246, 83, 154, 0.28);
}
.jj-btn--primary:hover { background: var(--jojismi-pink-deep); box-shadow: var(--jj-shadow-hover); }

.jj-btn--outline {
	background: transparent;
	border-color: var(--jj-line);
	color: var(--jj-ink);
}
.jj-btn--outline:hover { border-color: var(--jj-accent); color: var(--jj-accent); }

.jj-btn--wa { background: #25d366; color: #fff; }
.jj-btn--wa:hover { background: #1fb257; }

.jj-btn--lg { padding: 1rem 2rem; font-size: 1.05rem; }

.jj-link {
	color: var(--jj-accent);
	font-weight: 500;
	background: none; border: none; padding: 0;
	font-size: .95rem;
}
.jj-link:hover { color: var(--jojismi-pink-deep); }

/* Utilidades ------------------------------------------------------------- */
.jj-empty, .jj-empty-state { color: var(--jj-ink-muted); }
.jj-empty-state {
	text-align: center;
	padding: clamp(3rem, 10vw, 6rem) 1rem;
}
.jj-empty-state__icon { font-size: 3rem; color: var(--jj-accent); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}