/**
 * Grandes Genios — Layout.
 * Header, footer, grillas y contenedores estructurales.
 * Breakpoints: 640 / 1024 / 1280.
 */

.container {
	max-width: var(--gg-container-max);
	margin-inline: auto;
	padding-inline: var(--gg-container-pad);
}

body.gg-scroll-lock { overflow: hidden; }

/* ---- Barra de anuncio ----
 * Textos y efecto administrables desde Genios Core → Barra de Anuncios.
 * 5 efectos: marquee (100% CSS) y fade/slide/bounce/typewriter (rotan un
 * texto a la vez, ver assets/js/announcement-bar.js). */
.gg-announcement-bar {
	background: var(--gg-blue-dark);
	min-height: var(--gg-announcement-h);
	display: flex;
	align-items: center;
	overflow: hidden;
	position: relative;
}

/* Marquee: tira continua con los textos duplicados para el loop sin cortes. */
.gg-announcement-bar__track {
	display: flex;
	white-space: nowrap;
	animation: gg-marquee 32s linear infinite;
	will-change: transform;
}
.gg-announcement-bar__group { display: inline-flex; flex-shrink: 0; }
.gg-announcement-bar__item {
	padding-inline: var(--gg-space-5);
	color: var(--gg-white);
	font-size: var(--gg-text-xs);
	font-weight: 600;
	letter-spacing: 0.01em;
}
@keyframes gg-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.gg-announcement-bar__track { animation: none; }
}

/* Fade / Slide / Bounce / Typewriter: un mensaje a la vez, centrado. */
.gg-announcement-bar__viewport {
	position: relative;
	width: 100%;
	min-height: var(--gg-announcement-h);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: var(--gg-space-6);
}
.gg-announcement-bar__msg {
	position: absolute;
	inset: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--gg-white);
	font-size: var(--gg-text-xs);
	font-weight: 600;
	letter-spacing: 0.01em;
	padding-inline: var(--gg-space-4);
	opacity: 0;
	pointer-events: none;
}
.gg-announcement-bar__msg.is-active {
	opacity: 1;
	pointer-events: auto;
	position: relative;
}

.gg-announcement-bar--fade .gg-announcement-bar__msg { transition: opacity 500ms ease; }

.gg-announcement-bar--slide .gg-announcement-bar__msg { transform: translateY(-100%); transition: transform 400ms ease, opacity 400ms ease; }
.gg-announcement-bar--slide .gg-announcement-bar__msg.is-active { transform: translateY(0); }

.gg-announcement-bar--bounce .gg-announcement-bar__msg.is-active { animation: gg-announcement-bounce 600ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes gg-announcement-bounce {
	0% { transform: scale(0.4); opacity: 0; }
	60% { transform: scale(1.08); opacity: 1; }
	100% { transform: scale(1); }
}

.gg-announcement-bar--typewriter .gg-announcement-bar__msg {
	position: relative;
	opacity: 1;
	pointer-events: auto;
}
.gg-announcement-bar--typewriter .gg-announcement-bar__msg::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 0.9em;
	background: var(--gg-white);
	margin-left: 3px;
	animation: gg-announcement-caret 800ms steps(1) infinite;
	vertical-align: middle;
}
@keyframes gg-announcement-caret { 50% { opacity: 0; } }

/* ---- Header ---- */
.gg-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--gg-blue);
	color: var(--gg-white);
	transition: background-color var(--gg-duration-base) var(--gg-ease);
}
/* Después de bajar 100px (ver assets/js/header.js): fondo con leve
 * transparencia + blur en vez del azul sólido. */
.gg-header--scrolled {
	background: color-mix(in srgb, var(--gg-blue) 88%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.gg-header__inner {
	display: flex;
	align-items: center;
	gap: var(--gg-space-4);
	min-height: var(--gg-header-h);
}

.gg-header__menu-toggle { display: inline-flex; }
@media (min-width: 1024px) {
	/* Especificidad reforzada (.gg-icon-btn.gg-header__menu-toggle en vez
	 * de solo .gg-header__menu-toggle): .gg-icon-btn se define después en
	 * 03-components.css con la misma especificidad y, a igualdad, gana el
	 * archivo que carga último — sin esto el botón volvía a mostrarse en
	 * desktop. */
	.gg-icon-btn.gg-header__menu-toggle { display: none; }
}

.gg-header__logo { flex-shrink: 0; }

.gg-nav { display: none; }
@media (min-width: 1024px) {
	.gg-nav {
		display: block;
		flex: 1;
		text-align: center;
	}
}

.gg-header__actions {
	display: flex;
	align-items: center;
	gap: var(--gg-space-1);
	margin-left: auto;
}
@media (min-width: 1024px) {
	.gg-header__actions { margin-left: 0; }
}

/* ---- Buscador: input desplegado en el propio header en desktop, ícono
 * + panel colapsable (mobile/tablet) por debajo de 1024px. ---- */
.gg-header__search-inline { display: none; }
@media (min-width: 1024px) {
	.gg-header__search-inline { display: block; width: 360px; margin-right: 20px; }
	/* .gg-icon-btn.gg-search-toggle (no solo .gg-search-toggle): .gg-icon-btn
	 * se define después en 03-components.css con la misma especificidad y
	 * gana por orden de archivo si no se refuerza acá — mismo caso que
	 * .gg-header__menu-toggle más arriba. */
	.gg-icon-btn.gg-search-toggle { display: none; }
}

.gg-search-panel {
	max-height: 0;
	overflow: hidden;
	background: var(--gg-white);
	transition: max-height var(--gg-duration-base) var(--gg-ease);
}
.gg-search-panel.is-open { max-height: 120px; }
.gg-search-panel .container { padding-block: var(--gg-space-4); }
@media (min-width: 1024px) {
	.gg-search-panel { display: none; }
}

/* ---- Footer ---- */
.gg-footer {
	position: relative;
	background: radial-gradient(circle at center, var(--gg-blue-dark) 0%, var(--gg-blue) 100%);
	color: var(--gg-white);
	margin-top: var(--gg-space-9);
	overflow: hidden;
}
/* Todos los textos del footer a 14px (títulos de columna, links, botón
 * del newsletter, medios de pago, etc.), sin importar el tamaño que
 * traigan por su propia regla más específica. */
.gg-footer, .gg-footer * { font-size: 14px !important; }
.gg-footer-dots {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.gg-footer__top {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--gg-space-6);
	padding-block: var(--gg-space-8) var(--gg-space-6);
}
@media (min-width: 640px) {
	.gg-footer__top { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.gg-footer__top { grid-template-columns: 1.4fr 0.8fr 1fr 1.2fr; }
}

.gg-footer__bottom {
	position: relative;
	z-index: 1;
	border-top: 1px solid rgb(255 255 255 / 15%);
}
.gg-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--gg-space-3);
	padding-block: var(--gg-space-4);
	font-size: var(--gg-text-xs);
	color: rgb(255 255 255 / 75%);
}
.gg-footer__bottom-inner p { margin: 0; color: inherit; }

/* ---- Contenedores compartidos de páginas internas (se usan desde la
 * Parte 4 en adelante: tienda, ficha de producto, cuenta) ---- */
.gg-page-wrap { padding-block: var(--gg-space-6) var(--gg-space-9); }

/* ---- Secciones genéricas de home ---- */
.gg-section { padding-block: var(--gg-space-8); }
.gg-section--muted { background: var(--gg-gray-50); }
.gg-section:has(.gg-size-banner) { padding-block: 0; }
.gg-section__title { text-align: center; margin-bottom: var(--gg-space-6); font-size: 30px; }
.gg-section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gg-space-4);
	margin-bottom: var(--gg-space-6);
}
.gg-section__header .gg-section__title { margin: 0; text-align: left; }

/* ---- Grillas ---- */
.gg-product-grid, ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: var(--gg-space-4) !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
@media (min-width: 1024px) {
	.gg-product-grid, ul.products { grid-template-columns: repeat(4, 1fr) !important; gap: var(--gg-space-5) !important; }
}

/* ---- Carrusel genérico (Destacados, Testimonios) ----
 * El ancho/cantidad de cada item lo calcula JS (assets/js/carousel.js) a
 * partir de data-desktop-per-page / data-mobile-per-page, así que acá
 * solo va la estructura: viewport recorta, track es el flex que JS mueve
 * con transform. */
.gg-carousel { position: relative; }

.gg-carousel__viewport { overflow: hidden; }

.gg-carousel__track {
	display: flex;
	gap: var(--gg-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
	transition: transform 400ms ease;
}
@media (min-width: 1024px) {
	.gg-carousel__track { gap: var(--gg-space-5); }
}
@media (prefers-reduced-motion: reduce) {
	.gg-carousel__track { transition: none; }
}

/* En desktop entran las 4 en una sola página (una sola fila); el JS
 * oculta los bullets solo automáticamente cuando hay 1 sola página. */
.gg-benefits__carousel { padding-block: var(--gg-space-6); }
@media (min-width: 1024px) {
	.gg-benefits__carousel .gg-carousel__dots { display: none; }
}

/* ---- Contenedores compartidos de página interna ---- */
.gg-content-narrow { max-width: 720px; margin-inline: auto; padding-block: var(--gg-space-6) var(--gg-space-9); }
.gg-content-narrow--wide { max-width: 980px; }
.gg-shop-page { padding-block: var(--gg-space-6) var(--gg-space-9); }

/* Prosa de página genérica (Envíos y cambios, etc.): el reset global de
 * ul/ol (01-base.css) quita bullets/indent, acá los restauramos solo
 * dentro del cuerpo de la página. */
.gg-page__body h2 { font-size: var(--gg-text-2xl); margin-top: var(--gg-space-7); }
.gg-page__body h2:first-child { margin-top: 0; }
.gg-page__body h3 { font-size: var(--gg-text-lg); margin-top: var(--gg-space-5); }
.gg-page__body ul, .gg-page__body ol { margin: 0 0 var(--gg-space-4); padding-left: 1.25rem; }
.gg-page__body ul { list-style: disc; }
.gg-page__body ol { list-style: decimal; }
.gg-page__body li { margin-bottom: var(--gg-space-2); color: var(--gg-text); }

/* "Sobre nosotros": 2 fotos administrables desde Genios Core, lado a
 * lado en desktop y apiladas en mobile. */
.gg-about__photos {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gg-space-4);
	margin-top: var(--gg-space-7);
}
@media (min-width: 640px) {
	.gg-about__photos { grid-template-columns: 1fr 1fr; }
}
.gg-about__photo { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--gg-radius-xl); display: block; }