/* ============================================================
   MARCH — Global CSS
   Diseño basado en milkbarstore.com
   - Fuente: Outfit (equivalente libre de Garnett, fuente real de Milk Bar)
   - Tipografía: muy bold, grande, impactante — single-family
   - Colores: negro + blanco dominantes, fondo crema suave
   - Botones: negros, bordes rectos (sin border-radius)
   - Cards: sin fondo de tarjeta, imagen primero, precio+nombre abajo
   ============================================================ */

/* ─── Google Font ya encolado desde functions.php ────────────── */

/* ─── Design Tokens ─────────────────────────────────────────── */
:root {
	/* Una sola familia tipográfica, como Milk Bar con Garnett */
	--font-primary: 'Outfit', sans-serif;

	/* Pesos */
	--fw-regular:  400;
	--fw-medium:   500;
	--fw-semibold: 600;
	--fw-bold:     700;
	--fw-extrabold:800;
	--fw-black:    900;

	/* Colores — Milk Bar es black+white con foto a color */
	--color-black:     #111111;
	--color-white:     #ffffff;
	--color-off-white: #faf9f7;   /* fondo cream muy suave */
	--color-gray-100:  #f4f4f4;
	--color-gray-200:  #e5e5e5;
	--color-gray-400:  #999999;
	--color-gray-700:  #444444;

	/* Color de acento — March puede tener el suyo, placeholder por ahora */
	--color-accent:    #111111;   /* pendiente paleta del cliente */
	--color-accent-fg: #ffffff;

	/* Tipografía fluid */
	--text-xs:   clamp(11px, 1vw,   12px);
	--text-sm:   clamp(13px, 1.2vw, 14px);
	--text-base: clamp(15px, 1.4vw, 16px);
	--text-lg:   clamp(17px, 1.6vw, 20px);
	--text-xl:   clamp(22px, 2.5vw, 28px);
	--text-2xl:  clamp(30px, 4vw,   44px);
	--text-3xl:  clamp(40px, 6vw,   64px);
	--text-4xl:  clamp(56px, 9vw,  100px);

	/* Espaciado generoso — Milk Bar tiene mucho whitespace */
	--section-v:     clamp(72px, 10vw, 120px);
	--container-max: 1320px;
	--container-px:  clamp(20px, 4vw, 60px);

	/* Sin border-radius en botones (fiel a Milk Bar) */
	--radius-none: 0px;
	--radius-sm:   4px;

	/* Transiciones */
	--ease-base:   all 0.25s ease;
	--ease-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

	/* Sombras mínimas */
	--shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
	--shadow-md: 0 8px 30px rgba(0,0,0,0.10);
}

/* ─── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-primary);
	font-size: var(--text-base);
	font-weight: var(--fw-regular);
	color: var(--color-black);
	background-color: var(--color-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	line-height: 1.5;
}

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

a {
	color: inherit;
	text-decoration: none;
	transition: var(--ease-base);
}

/* ─── Contenedor ─────────────────────────────────────────────── */
.march-container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding-left: var(--container-px);
	padding-right: var(--container-px);
}

/* ─── Tipografía — estilo Milk Bar (Outfit Black) ────────────── */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-primary);
	font-weight: var(--fw-black);
	letter-spacing: -0.03em;
	line-height: 1.0;
}

/* Clase display: ENORME, ultra-bold, todo uppercase opcional */
.march-display {
	font-family: var(--font-primary);
	font-weight: var(--fw-black);
	font-size: var(--text-4xl);
	letter-spacing: -0.04em;
	line-height: 0.95;
	text-transform: uppercase;
}

.march-heading {
	font-family: var(--font-primary);
	font-weight: var(--fw-black);
	font-size: var(--text-3xl);
	letter-spacing: -0.03em;
	line-height: 1.0;
}

.march-label {
	font-family: var(--font-primary);
	font-size: var(--text-xs);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--color-gray-700);
}

/* ─── Botones — Milk Bar: negros, rectangulares, uppercase ──── */
.march-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 36px;
	font-family: var(--font-primary);
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	border: 2px solid currentColor;
	border-radius: var(--radius-none);
	cursor: pointer;
	transition: var(--ease-base);
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
}

/* Botón primario: negro sólido con hover invertido */
.march-btn--dark {
	background-color: var(--color-black);
	color: var(--color-white);
	border-color: var(--color-black);
}
.march-btn--dark:hover {
	background-color: var(--color-white);
	color: var(--color-black);
}

/* Botón outline */
.march-btn--outline {
	background-color: transparent;
	color: var(--color-black);
	border-color: var(--color-black);
}
.march-btn--outline:hover {
	background-color: var(--color-black);
	color: var(--color-white);
}

/* Botón blanco (sobre fondos oscuros) */
.march-btn--white {
	background-color: var(--color-white);
	color: var(--color-black);
	border-color: var(--color-white);
}
.march-btn--white:hover {
	background-color: transparent;
	color: var(--color-white);
}

/* ─── Secciones — Milk Bar: mucho espacio vertical ──────────── */
.march-section {
	padding: var(--section-v) 0;
}

.march-section-label {
	display: block;
	font-family: var(--font-primary);
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--color-gray-700);
	margin-bottom: 16px;
}

/* Milk Bar: títulos de sección GIGANTES, all-caps */
.march-section-title {
	font-family: var(--font-primary);
	font-size: var(--text-3xl);
	font-weight: var(--fw-black);
	letter-spacing: -0.03em;
	line-height: 1.0;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.march-section-subtitle {
	font-family: var(--font-primary);
	font-size: var(--text-base);
	font-weight: var(--fw-regular);
	color: var(--color-gray-700);
	line-height: 1.65;
	max-width: 560px;
}

/* ─── WhatsApp Floating Button ───────────────────────────────── */
.march-whatsapp-float {
	position: fixed;
	bottom: 28px;
	right: 28px;
	z-index: 9999;
	width: 56px;
	height: 56px;
	background-color: #25d366;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
	transition: var(--ease-base);
	text-decoration: none;
}
.march-whatsapp-float:hover {
	transform: scale(1.08);
}
.march-whatsapp-float svg {
	width: 28px;
	height: 28px;
	fill: #ffffff;
}

/* ─── Elementor overrides ────────────────────────────────────── */
.elementor-section .elementor-container {
	max-width: var(--container-max);
}

/* Ocultar título de página que Hello Elementor muestra por defecto */
.page-header,
.entry-header,
.page-header .page-title,
.entry-header .entry-title {
	display: none !important;
}

/* ─── Utilidades ─────────────────────────────────────────────── */
.march-text-center { text-align: center; }
.march-text-left   { text-align: left;   }
.march-text-right  { text-align: right;  }

.march-flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ─── Grids responsivos ──────────────────────────────────────── */
.march-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.march-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.march-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

@media (max-width: 991px) {
	.march-grid-4 { grid-template-columns: repeat(2, 1fr); }
	.march-grid-3 { grid-template-columns: repeat(2, 1fr); }
	.march-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
	.march-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.march-grid-3 { grid-template-columns: 1fr; }
}

/* ─── WooCommerce: Eliminar fondos grises en páginas de producto ─── */
body.single-product {
	background-color: #ffffff !important;
}

body.single-product .site-main,
body.single-product #main,
body.single-product #content,
body.single-product .site-content,
body.single-product .entry-content,
body.single-product .hentry,
body.single-product main[id],
body.single-product article.product {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	padding: 0 !important;
	max-width: none !important;
}

/* Eliminar cualquier max-width de Hello Elementor en pages de WC */
body.woocommerce-page .site-content {
	padding-top: 0 !important;
}

/* ─── Gutenberg blocks en páginas de producto: sin max-width ni fondos ─── */
/* Aplica a productos importados con Gutenberg blocks en el contenido */
body.single-product .wp-block-group,
body.single-product .wp-block-cover,
body.single-product .wp-block-columns,
body.single-product .wp-block-column,
body.single-product .is-layout-flow,
body.single-product .is-layout-constrained,
body.single-product .entry-content > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	background-color: transparent !important;
	padding: 0 !important;
}

/* El contentSize de theme.json genera una clase .alignwide y layout constraints */
body.single-product .wp-site-blocks > *,
body.single-product [class*="is-layout"] {
	--wp--style--global--content-size: 100% !important;
	--wp--style--global--wide-size: 100% !important;
	max-width: none !important;
}

/* ─── Lo mismo para Checkout y Cart ─────────────────────── */
body.woocommerce-checkout .entry-content > *,
body.woocommerce-checkout .wp-site-blocks > *,
body.woocommerce-checkout [class*="is-layout"],
body.woocommerce-checkout .is-layout-constrained,
body.woocommerce-checkout .is-layout-flow,
body.woocommerce-cart .entry-content > *,
body.woocommerce-cart .wp-site-blocks > *,
body.woocommerce-cart [class*="is-layout"] {
	--wp--style--global--content-size: 100% !important;
	--wp--style--global--wide-size: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.woocommerce-checkout .wp-block-woocommerce-checkout,
body.woocommerce-cart .wp-block-woocommerce-cart {
	max-width: none !important;
	width: 100% !important;
}

/* ─── Reveal on scroll ───────────────────────────────────────── */
.march-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.march-reveal.march-visible {
	opacity: 1;
	transform: none;
}