/* ==========================================================================
   AndalBrok 2027 · BASE
   Reset ligero + layout (.ab-wrap) + tipografía + botones + accesibilidad.
   Depende de tokens.css. Nunca colores a pelo: usa var(--ab-*).
   ========================================================================== */

/* ---- Reset ligero ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--ab-font);
	font-size: var(--ab-body);
	font-weight: var(--ab-fw-regular);
	line-height: var(--ab-lh-body);
	color: var(--ab-ink);
	background: var(--ab-white);
	-webkit-font-smoothing: antialiased;
}
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--ab-red); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Tipografía ---- */
h1, h2, h3, h4 {
	margin: 0 0 var(--ab-space-4);
	line-height: var(--ab-lh-tight);
	font-weight: var(--ab-fw-bold);
	color: var(--ab-black);
	text-wrap: balance;
}
h1 { font-size: var(--ab-h1); }
h2 { font-size: var(--ab-h2); }
h3 { font-size: var(--ab-h3); }
p  { margin: 0 0 var(--ab-space-4); }
p:last-child { margin-bottom: 0; }

/* ---- Layout ---- */
.ab-wrap {
	max-width: var(--ab-wrap-max);
	margin-inline: auto;
	padding-inline: var(--ab-wrap-pad);
}
/* Ritmo vertical entre secciones de bloque */
.ab-section { padding-block: var(--ab-space-16); }
@media (min-width: 900px) {
	.ab-section { padding-block: var(--ab-space-24); }
}

/* ---- Botones ---- */
.ab-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1.4rem;
	border-radius: var(--ab-radius);
	font-weight: var(--ab-fw-bold);
	line-height: 1;
	text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ab-btn:hover { text-decoration: none; }
.ab-btn--primary { background: var(--ab-red); color: var(--ab-white); }
.ab-btn--primary:hover { background: var(--ab-red-dark); color: var(--ab-white); }
.ab-btn--ghost { background: transparent; color: var(--ab-red); border-color: var(--ab-red); }
.ab-btn--ghost:hover { background: var(--ab-red); color: var(--ab-white); }

/* ---- Accesibilidad: foco visible ---- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.ab-btn:focus-visible {
	outline: 3px solid var(--ab-orange);
	outline-offset: 2px;
}

/* Utilidad: texto solo para lectores de pantalla */
.ab-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

/* Iconos decorativos */
.ab-ico { display: inline-flex; flex: 0 0 auto; color: var(--ab-red); }
.ab-ico svg { width: 1.5rem; height: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}

/* ---- Cabecera de sitio ---- */
.ab-site-header { border-bottom: 1px solid var(--ab-gray-300); background: var(--ab-white); }
.ab-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ab-space-6);
	padding-block: var(--ab-space-4);
}
.ab-site-header__name { font-weight: var(--ab-fw-bold); font-size: 1.5rem; color: var(--ab-red); }
.ab-site-header__brand:hover { text-decoration: none; }
.ab-site-nav { list-style: none; display: flex; flex-wrap: wrap; gap: var(--ab-space-6); margin: 0; }
.ab-site-nav a { color: var(--ab-ink); font-weight: var(--ab-fw-medium); }

/* ---- Migas de pan ---- */
.ab-breadcrumb { padding-block: var(--ab-space-3); background: var(--ab-gray-100); font-size: var(--ab-small); }
.ab-breadcrumb__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--ab-space-2); margin: 0; color: var(--ab-gray-500); }
.ab-breadcrumb__list li + li::before { content: "/"; margin-right: var(--ab-space-2); color: var(--ab-gray-300); }
.ab-breadcrumb__list [aria-current="page"] { color: var(--ab-gray-700); }

/* ---- Pie de sitio (placeholder hasta B11) ---- */
.ab-site-footer { background: var(--ab-black); color: var(--ab-gray-300); padding-block: var(--ab-space-12); }
.ab-site-footer__inner { display: grid; gap: var(--ab-space-8); }
@media (min-width: 900px) { .ab-site-footer__inner { grid-template-columns: 2fr 1fr 1fr; } }
.ab-site-footer__name { font-weight: var(--ab-fw-bold); color: var(--ab-white); font-size: 1.2rem; margin-bottom: var(--ab-space-2); }
.ab-site-footer a { color: var(--ab-white); }
.ab-site-footer ul { list-style: none; display: grid; gap: var(--ab-space-2); }
.ab-site-footer__legal { display: flex; flex-direction: column; gap: var(--ab-space-2); }
.ab-site-footer__copy { text-align: center; margin-top: var(--ab-space-8); font-size: var(--ab-small); }
.ab-site-footer__todo { color: var(--ab-warn); }

/* Skip link visible al enfocar */
.ab-skip:focus {
	position: fixed; top: var(--ab-space-2); left: var(--ab-space-2);
	width: auto; height: auto; clip: auto;
	background: var(--ab-red); color: var(--ab-white);
	padding: var(--ab-space-2) var(--ab-space-4); border-radius: var(--ab-radius);
	z-index: 1000;
}