/* =========================================================
   GRUPO J&J — GLOBAL BASE STYLESHEET (main.css)
   Corporate / professional / metropolitan design system.
   This file holds site-wide resets, design tokens and shared
   components. Page-specific layout lives in style/index.css.
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
	/* Core palette — dark metropolitan navy + steel blue accent,
	   matches the existing Header (#171d25) and border accent (#007bff) */
	--jj-navy:        #12161d;
	--jj-navy-soft:   #171d25;
	--jj-blue:        #0d3b66;
	--jj-blue-deep:   #003f5a;
	--jj-accent:      #007bff;
	--jj-accent-dark: #0056b3;
	--jj-orange:      #e2792d; /* refined version of the "orange" accent already used site-wide (h1/h2 underlines, submit button) */
	--jj-orange-dark: #c15f1a;

	--jj-bg-light:    #0b1016;
	--jj-bg-blue-1:   #101722;
	--jj-bg-blue-2:   #151e29;
	--jj-white:       #f4f7fa;

	--jj-text:        #e5ebf1;
	--jj-text-soft:   #aab6c2;
	--jj-text-invert: #f5f8fa;

	--jj-radius-sm:   6px;
	--jj-radius-md:   14px;
	--jj-radius-lg:   24px;

	--jj-shadow-sm:   0 4px 14px rgba(18, 22, 29, 0.08);
	--jj-shadow-md:   0 12px 32px rgba(18, 22, 29, 0.14);
	--jj-shadow-lg:   0 24px 60px rgba(18, 22, 29, 0.22);

	--jj-transition:  0.45s cubic-bezier(0.22, 1, 0.36, 1);
	--jj-transition-fast: 0.25s ease;

	--jj-container:   1240px;
	--jj-header-h:    120px;
}

@media screen and (max-width: 991px){
	:root{ --jj-header-h: 84px; }
}

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

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

body, html{
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 100vw;
	overflow-x: hidden; /* fixes horizontal scroll on mobile */
	background-color: var(--jj-bg-light);
	color: var(--jj-text);
	font-family: 'Inter', 'Segoe UI', Tahoma, Arial, sans-serif;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6{
	font-family: 'Poppins', 'Segoe UI', Tahoma, Arial, sans-serif;
	color: var(--jj-navy-soft);
	line-height: 1.25;
	margin: 0 0 0.6em 0;
}

p{ margin: 0 0 1em 0; }

a{
	color: var(--jj-accent);
	text-decoration: none;
	transition: color var(--jj-transition-fast);
}
a:hover{ color: var(--jj-accent-dark); }

ul{ margin: 0; padding-left: 1.2em; }

button{ font-family: inherit; cursor: pointer; }

/* Responsive media — every image/video scales with its container */
img, video, svg{
	max-width: 100%;
	height: auto;
	display: block;
}

/* ---------- Layout utilities ---------- */
.jj-container{
	width: 100%;
	max-width: var(--jj-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(16px, 4vw, 48px);
	padding-right: clamp(16px, 4vw, 48px);
}

.jj-section{
	width: 100%;
	padding-top: clamp(48px, 7vw, 96px);
	padding-bottom: clamp(48px, 7vw, 96px);
}

.jj-eyebrow{
	display: inline-block;
	font-size: clamp(12px, 1.4vw, 14px);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--jj-accent);
	margin-bottom: 0.75em;
}

.jj-heading-underline{
	position: relative;
	padding-bottom: 14px;
}
.jj-heading-underline::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 64px;
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--jj-accent), var(--jj-orange));
}
.jj-heading-underline.center::after{
	left: 50%;
	transform: translateX(-50%);
}

/* ---------- Buttons ---------- */
.btn-primary, .btn-outline{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.85em 1.8em;
	font-size: 15px;
	font-weight: 600;
	border-radius: 999px;
	border: 2px solid transparent;
	transition: transform var(--jj-transition-fast), box-shadow var(--jj-transition-fast), background-color var(--jj-transition-fast), color var(--jj-transition-fast);
	white-space: nowrap;
}

.btn-primary{
	background: linear-gradient(135deg, var(--jj-accent), var(--jj-blue));
	color: var(--jj-white);
	box-shadow: var(--jj-shadow-sm);
}
.btn-primary:hover{
	transform: translateY(-3px);
	box-shadow: var(--jj-shadow-md);
	color: var(--jj-white);
}

.btn-outline{
	background: transparent;
	color: var(--jj-navy-soft);
	border-color: var(--jj-navy-soft);
}
.btn-outline:hover{
	background: var(--jj-navy-soft);
	color: var(--jj-white);
	transform: translateY(-3px);
}

/* ---------- Scroll-reveal helpers (used alongside AOS) ---------- */
.jj-fade-el{
	opacity: 0;
	transform: translateY(36px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1);
	will-change: opacity, transform;
}
.jj-fade-el.is-visible{
	opacity: 1;
	transform: translateY(0);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior: auto; }
	.jj-fade-el, [data-aos]{
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}

/* Generic responsive table for any legacy markup */
table{ max-width: 100%; }