/*
 * variables.css
 * Sistema de diseño de Global Nails — ver design-system.md en la raíz del proyecto.
 * TODAS las demás hojas de estilo del tema usan estas variables. No se escriben
 * colores, tipografías ni espaciados "a mano" en ningún otro archivo CSS.
 */

:root {
	/* Núcleo de marca — extraído del degradado verde-teal-azul del logo real */
	--color-primario: #1fa39a;
	--color-primario-hover: #178a82;
	--color-verde-marca: #009c5a;
	--color-azul-marca: #2e9bc7;
	--color-secundario: #0a2e2f;

	/* Acento cálido (contraste intencional para conversión) */
	--color-acento: #c17a4e;
	--color-acento-hover: #a8663d;
	--color-dorado: #cfa15b;

	/* Neutros */
	--color-fondo: #ffffff;
	--color-fondo-alterno: #f7f5f0;
	--color-texto: #0a0b12;
	--color-texto-suave: #5c6b6a;
	--color-borde: #dde8e6;

	/* Estado */
	--color-exito: #009c5a;
	--color-error: #c0392b;
	--color-aviso: #cfa15b;

	/* Tipografía */
	--fuente-titulos: 'Montserrat', sans-serif;
	--fuente-cuerpo: 'Rubik', sans-serif;

	/* Espaciados (escala de 8px) */
	--espacio-xs: 0.5rem;
	--espacio-sm: 1rem;
	--espacio-md: 1.5rem;
	--espacio-lg: 2.5rem;
	--espacio-xl: 4rem;
	--espacio-2xl: 6rem;

	--contenedor-max: 1280px;
	--contenedor-padding: 1.25rem;

	/* Radios */
	--radio-sm: 6px;
	--radio-md: 12px;
	--radio-lg: 20px;
	--radio-full: 999px;

	/* Sombras */
	--sombra-sutil: 0 2px 8px rgba(10, 15, 20, 0.06);
	--sombra-tarjeta: 0 4px 16px rgba(10, 46, 47, 0.08);
	--sombra-hover: 0 8px 28px rgba(10, 46, 47, 0.14);
	--sombra-modal: 0 20px 60px rgba(10, 15, 20, 0.25);

	/* Transición estándar para hovers/animaciones */
	--transicion: 0.2s ease;
}

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

/* Reset defensivo: Elementor y otros plugins que siguen instalados (se
   retiran más adelante) inyectan CSS global con reglas de etiqueta como
   "section { padding: ... }" que rompía el ancho completo del hero. Estas
   reglas devuelven las etiquetas semánticas del tema a cero para que no
   dependan de que esos plugins estén activos o no. */
section, article, header, footer, nav, aside {
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--fuente-cuerpo);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-texto);
	background: var(--color-fondo);
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--color-primario);
	text-decoration: none;
	transition: color var(--transicion);
}
a:hover {
	color: var(--color-primario-hover);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--espacio-sm);
	color: var(--color-secundario);
}

h1, .h1 { font-family: var(--fuente-titulos); font-weight: 700; font-size: clamp(2rem, 5vw + 1rem, 3.5rem); line-height: 1.1; }
h2, .h2 { font-family: var(--fuente-titulos); font-weight: 600; font-size: clamp(1.6rem, 3vw + 1rem, 2.5rem); line-height: 1.15; }
h3, .h3 { font-family: var(--fuente-titulos); font-weight: 600; font-size: clamp(1.3rem, 2vw + 1rem, 1.75rem); line-height: 1.2; }
h4, .h4 { font-family: var(--fuente-cuerpo); font-weight: 600; font-size: 1.25rem; line-height: 1.3; }
h5, .h5 { font-family: var(--fuente-cuerpo); font-weight: 600; font-size: 1.1rem; line-height: 1.3; }
h6, .h6 { font-family: var(--fuente-cuerpo); font-weight: 500; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }

p { margin: 0 0 var(--espacio-sm); }

.texto-pequeno { font-size: .875rem; }
.texto-suave { color: var(--color-texto-suave); }

/* Contenedor estándar del sitio */
.contenedor {
	width: 100%;
	max-width: var(--contenedor-max);
	margin-inline: auto;
	padding-inline: var(--contenedor-padding);
}

/* Botones — a propósito NO se aplica a todos los <button> del sitio (eso
   rompía botones propios como la hamburguesa o el buscador): solo a los
   que usan estas clases, o al .button/input[submit] nativos de WooCommerce. */
.boton, input[type="submit"], .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .85rem 1.75rem;
	border-radius: var(--radio-md);
	border: none;
	cursor: pointer;
	font-family: var(--fuente-cuerpo);
	font-weight: 600;
	font-size: .95rem;
	letter-spacing: .02em;
	transition: transform var(--transicion), box-shadow var(--transicion), background-color var(--transicion), color var(--transicion);
}

.boton-primario, input[type="submit"], .button, .single_add_to_cart_button {
	background: var(--color-acento) !important;
	color: #fff !important;
}
.boton-primario:hover, input[type="submit"]:hover, .button:hover, .single_add_to_cart_button:hover {
	background: var(--color-acento-hover) !important;
	transform: translateY(-2px);
	box-shadow: var(--sombra-hover);
}

.boton-secundario {
	background: transparent;
	color: var(--color-primario);
	border: 2px solid var(--color-primario);
}
.boton-secundario:hover {
	background: var(--color-primario);
	color: #fff;
}

.boton-texto {
	background: none;
	color: var(--color-secundario);
	padding: .5rem 0;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Utilidades de animación de entrada (usadas por main.js con IntersectionObserver) */
.gn-animar {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s ease, transform .6s ease;
}
.gn-animar.gn-visible {
	opacity: 1;
	transform: translateY(0);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-secundario);
	color: #fff;
	padding: var(--espacio-xs) var(--espacio-sm);
	z-index: 9999;
}
.skip-link:focus {
	left: var(--espacio-sm);
	top: var(--espacio-xs);
}

@media (min-width: 768px) {
	:root { --contenedor-padding: 2rem; }
}

/*
 * Timeline de trazabilidad de pedidos — compartido entre "Mi Cuenta"
 * (assets/css/mi-cuenta.css lo complementa) y la página pública
 * "Rastrear mi pedido" (assets/css/rastreo-pedido.css), por eso vive aquí
 * en vez de duplicarse en los dos archivos.
 */
.gn-timeline-wrap {
	background: var(--color-fondo-alterno);
	border-radius: var(--radio-lg);
	padding: var(--espacio-md);
	margin-block: var(--espacio-md);
}
.gn-timeline-titulo { margin-bottom: var(--espacio-md); font-size: 1.1rem; }

.gn-timeline {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}
.gn-paso {
	flex: 1;
	text-align: center;
	position: relative;
	font-size: .8rem;
	color: var(--color-texto-suave);
}
.gn-paso::before {
	content: '';
	position: absolute;
	top: 20px; left: -50%;
	width: 100%;
	height: 3px;
	background: var(--color-borde);
	z-index: 0;
}
.gn-paso:first-child::before { display: none; }
.gn-paso__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--radio-full);
	background: #fff;
	border: 2px solid var(--color-borde);
	margin: 0 auto .5rem;
	position: relative;
	z-index: 1;
	font-size: 1.1rem;
}
.gn-paso__label { display: block; }

.gn-paso--completado::before { background: var(--color-primario); }
.gn-paso--completado .gn-paso__icono { border-color: var(--color-primario); background: var(--color-primario); }
.gn-paso--completado .gn-paso__label { color: var(--color-secundario); }

.gn-paso--actual::before { background: var(--color-primario); }
.gn-paso--actual .gn-paso__icono {
	border-color: var(--color-acento);
	box-shadow: 0 0 0 4px rgba(193,122,78,.2);
}
.gn-paso--actual .gn-paso__label { color: var(--color-acento); font-weight: 700; }

.gn-timeline-guia {
	margin-top: var(--espacio-md);
	padding-top: var(--espacio-md);
	border-top: 1px solid var(--color-borde);
	font-size: .9rem;
}

.gn-timeline-alerta {
	padding: var(--espacio-sm) var(--espacio-md);
	border-radius: var(--radio-sm);
	background: #fdecec;
	color: #7a2c22;
}
.gn-timeline-alerta--refunded { background: #fdf3e3; color: #7a5a22; }

@media (max-width: 480px) {
	.gn-timeline { flex-wrap: wrap; gap: var(--espacio-sm); }
	.gn-paso { flex: 1 1 30%; }
	.gn-paso::before { display: none; }
}

/*
 * Páginas genéricas (page.php) — ancho completo como el home: la página en
 * sí no tiene contenedor angosto propio (eso lo pone cada sección), y no
 * lleva título visible (se pidió una página "limpia", sin repetir el nombre).
 */
.gn-pagina-generica { padding-block: 0 var(--espacio-2xl); }
.gn-pagina-generica__imagen { margin-bottom: var(--espacio-lg); overflow: hidden; }
.gn-pagina-generica__imagen img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.gn-pagina-generica__contenido {
	line-height: 1.75;
	max-width: 860px;
	margin-inline: auto;
	padding-inline: var(--contenedor-padding);
}
.gn-pagina-generica__contenido h2 { margin-top: var(--espacio-lg); }