/**
 * Grandes Genios — Base.
 * Reset, tipografía por defecto, accesibilidad y utilidades transversales.
 * Nada específico de un componente va acá (eso es 03-components.css).
 */

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

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	margin: 0;
	background: var(--gg-white);
	color: var(--gg-text);
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { border-style: none; }

a {
	color: var(--gg-blue);
	text-decoration: none;
}
a:hover { color: var(--gg-blue-dark); }

ul, ol { margin: 0; padding: 0; list-style: none; }

button {
	font-family: inherit;
	cursor: pointer;
	background: none;
	border: none;
	color: inherit;
}

input, select, textarea {
	font-family: inherit;
	font-size: var(--gg-text-base);
	color: var(--gg-text);
}

table { border-collapse: collapse; width: 100%; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--gg-font-display);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 var(--gg-space-3);
	color: var(--gg-blue-dark);
}
h1 { font-size: var(--gg-text-4xl); }
h2 { font-size: var(--gg-text-3xl); }
h3 { font-size: var(--gg-text-xl); }
h4 { font-size: var(--gg-text-lg); }

p { margin: 0 0 var(--gg-space-4); color: var(--gg-text); }
p.muted, .text-muted { color: var(--gg-gray-500); }

strong, b { font-weight: 700; }

hr {
	border: none;
	border-top: 1px solid var(--gg-border);
	margin: var(--gg-space-6) 0;
}

::selection {
	background: var(--gg-green);
	color: var(--gg-blue-dark);
}

/* ---- Foco / accesibilidad ---- */
:focus-visible {
	outline: 2px solid var(--gg-focus-ring);
	outline-offset: 2px;
	border-radius: var(--gg-radius-sm);
}
/* Nunca quitamos el foco sin reemplazarlo por :focus-visible en el propio componente. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
	outline: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

.skip-link {
	position: fixed;
	top: -80px;
	left: var(--gg-space-4);
	z-index: 9999;
	background: var(--gg-blue-dark);
	color: var(--gg-white);
	padding: var(--gg-space-2) var(--gg-space-4);
	border-radius: var(--gg-radius-sm);
	transition: top var(--gg-duration-base) var(--gg-ease);
}
.skip-link:focus { top: var(--gg-space-4); }

/* ---- Utilidades de layout compartidas ---- */
.container {
	max-width: var(--gg-container-max);
	margin-inline: auto;
	padding-inline: var(--gg-container-pad);
}

/* ---- Formularios base (los estilos de campos específicos de WooCommerce
 * viven en 04-woocommerce.css; esto es la base compartida) ---- */
label {
	display: block;
	font-weight: 600;
	font-size: var(--gg-text-sm);
	margin-bottom: var(--gg-space-1);
	color: var(--gg-text);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[type="number"],
select,
textarea {
	width: 100%;
	border: 1px solid var(--gg-border-strong);
	border-radius: var(--gg-radius-sm);
	padding: 0.7rem 0.9rem;
	background: var(--gg-white);
	transition: border-color var(--gg-duration-fast) var(--gg-ease);
}
input:focus, select:focus, textarea:focus {
	border-color: var(--gg-blue-light);
}

/* ---- Placeholders de imagen (mientras no hay asset real) ----
 * Ver README.md por tamaños recomendados por uso. */
.gg-placeholder {
	background: var(--gg-gray-50);
	border: 1px dashed var(--gg-border-strong);
	color: var(--gg-gray-500);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--gg-text-xs);
	text-align: center;
	border-radius: var(--gg-radius-md);
}