/* FIRESUPPLY LANDING PAGE - ESTILOS UNIFICADOS OPTIMIZADOS */

/* Variables comunes */
:root {
	--fl-primary: #FF6B35;
	--fl-primary-rgba-1: rgba(255, 107, 53, 0.1);
	--fl-primary-rgba-2: rgba(255, 107, 53, 0.2);
	--fl-primary-rgba-3: rgba(255, 107, 53, 0.3);
	--fl-primary-hover: #e55a28;
	--fl-border: #e5e7eb;
	--fl-border-light: rgba(0, 0, 0, 0.06);
	--fl-bg-light: #f8f9fa;
	--fl-bg-white: #fff;
	--fl-bg-gray: #f9fafb;
	--fl-text-dark: #212529;
	--fl-text-muted: #6c757d;
	--fl-text-light: #9ca3af;
}

/* HERO FIRESUPPLY */
.fl-hero {
	padding: 5rem 0 8rem; background: var(--fl-bg-white);
	position: relative; overflow: hidden;
}
.fl-hero::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	opacity: 0.03; pointer-events: none;
	background-image: radial-gradient(var(--fl-text-dark) 1px, transparent 1px);
	background-size: 16px 16px;
}
.fl-badge {
	display: inline-flex; align-items: center; gap: 0.5rem;
	padding: 0.5rem 0.75rem; border-radius: 50px;
	background: var(--fl-primary-rgba-1); border: 1px solid var(--fl-primary-rgba-2);
}
.fl-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fl-primary); }
.fl-btn-primary {
	background: var(--fl-primary); color: var(--fl-bg-white);
	padding: 1rem 2rem; border-radius: 0.5rem; font-weight: 700;
	text-decoration: none; display: inline-flex; align-items: center;
	gap: 0.5rem; transition: all 0.3s ease;
	box-shadow: 0 8px 24px var(--fl-primary-rgba-2); border: none;
}
.fl-btn-primary:hover {
	background: var(--fl-primary-hover); transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(255, 107, 53, 0.3); color: var(--fl-bg-white);
}
.fl-btn-outline {
	background: var(--fl-bg-white); border: 2px solid var(--fl-border);
	color: var(--fl-text-dark); padding: 1rem 2rem; border-radius: 0.5rem;
	font-weight: 600; text-decoration: none;
	display: inline-flex; align-items: center; justify-content: center;
	transition: all 0.3s ease;
}
.fl-btn-outline:hover { border-color: #d1d5db; background: #f9fafb; }
.fl-diagram {
	background: var(--fl-bg-light); border: 1px solid var(--fl-border-light);
	border-radius: 1rem; padding: 3rem 2rem;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}
.fl-node {
	width: 48px; height: 48px; background: var(--fl-border);
	border-radius: 0.5rem; display: flex;
	align-items: center; justify-content: center;
}
.fl-core {
	background: var(--fl-bg-white); border: 2px solid var(--fl-primary-rgba-2);
	border-radius: 0.75rem; padding: 1.5rem;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); position: relative;
}
.fl-core-badge {
	position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
	background: var(--fl-primary); color: var(--fl-bg-white);
	font-size: 10px; font-weight: 700; padding: 4px 12px;
	border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em;
}
.fl-progress {
	height: 6px; background: #f3f4f6; border-radius: 20px; overflow: hidden;
}
.fl-progress-bar { height: 100%; background: var(--fl-primary); width: 66%; }
.fl-output {
	background: var(--fl-bg-white); border: 1px solid var(--fl-border);
	border-radius: 0.5rem; padding: 0.75rem 1.5rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	display: flex; align-items: center; gap: 0.75rem;
}
.fl-logo-strip {
	opacity: 0.4; filter: grayscale(100%); transition: all 0.5s ease;
}
.fl-logo-strip:hover { opacity: 1; filter: grayscale(0); }

/* PROBLEMA FIRESUPPLY */
.fl-problem { padding: 6rem 0; background: var(--fl-bg-light); }
.fl-problem-card {
	background: var(--fl-bg-white); border: 1px solid var(--fl-border-light);
	border-radius: 0.75rem; padding: 2rem; transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.fl-problem-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); transform: translateY(-4px);
}
.fl-problem-icon {
	width: 48px; height: 48px; background: var(--fl-primary-rgba-1);
	border-radius: 0.5rem; display: flex;
	align-items: center; justify-content: center; color: var(--fl-primary);
	transition: all 0.3s ease;
}
.fl-problem-card:hover .fl-problem-icon {
	background: var(--fl-primary); color: var(--fl-bg-white);
}

/* SOLUCIÓN Y PASOS FIRESUPPLY */
.fl-solution { padding: 6rem 0; background: var(--fl-bg-white); border-bottom: 1px solid var(--fl-border-light); }
.fl-steps { padding: 6rem 0; background: var(--fl-bg-white); }
.fl-step-circle {
	width: 64px; height: 64px; border-radius: 50%;
	background: var(--fl-bg-light); border: 1px solid var(--fl-border);
	display: flex; align-items: center; justify-content: center;
	position: relative; z-index: 10; transition: all 0.3s ease;
}
.fl-step:hover .fl-step-circle {
	border-color: var(--fl-primary);
	box-shadow: 0 4px 12px rgba(255, 107, 53, 0.15);
}
.fl-step-circle-active {
	background: var(--fl-primary-rgba-1); border: 1px solid var(--fl-primary-rgba-3);
	color: var(--fl-primary); box-shadow: 0 2px 8px rgba(255, 107, 53, 0.15);
}
.fl-step-line {
	position: absolute; top: 32px; right: -50%; width: 100%;
	height: 2px; background: #f3f4f6; z-index: 0;
}

@media (max-width: 991px) {
	.fl-step-line { display: none; }
}

/* WHITELABEL FIRESUPPLY */
.fl-whitelabel { padding: 6rem 0; background: var(--fl-bg-light); overflow: hidden; }
.fl-checklist { list-style: none; padding: 0; margin: 0; }
.fl-checklist li { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.fl-browser {
	background: var(--fl-bg-white); border: 1px solid var(--fl-border);
	border-radius: 0.75rem; overflow: hidden;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
	transform: rotate(1deg); transition: transform 0.5s ease;
}
.fl-browser:hover { transform: rotate(0deg); }
.fl-browser-header {
	background: var(--fl-bg-gray); border-bottom: 1px solid var(--fl-border);
	padding: 0.75rem; display: flex; align-items: center; gap: 0.5rem;
}
.fl-browser-dot { width: 12px; height: 12px; border-radius: 50%; }
.fl-browser-urlbar {
	flex: 1; background: var(--fl-bg-white); border: 1px solid var(--fl-border);
	border-radius: 0.25rem; padding: 0.375rem 0.75rem; margin-left: 1rem;
	font-family: monospace; font-size: 0.75rem; color: var(--fl-text-light);
}
.fl-palette {
	position: absolute; bottom: 1rem; right: 1rem;
	background: var(--fl-bg-white); padding: 1rem; border-radius: 0.5rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	border: 1px solid #f3f4f6; animation: fl-pulse 2s infinite;
}
.fl-color-dot {
	width: 24px; height: 24px; border-radius: 50%;
	border: 2px solid var(--fl-bg-white);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); cursor: pointer;
}
@keyframes fl-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

/* GOVERNANCE Y AUDIENCE FIRESUPPLY */
.fl-governance { padding: 6rem 0; background: var(--fl-bg-white); }
.fl-audience { padding: 5rem 0; border-top: 1px solid var(--fl-border-light); }
.fl-gov-card {
	padding: 1.5rem; border: 1px solid var(--fl-border-light);
	border-radius: 0.75rem; background: var(--fl-bg-gray);
}
.fl-audience-circle {
	width: 64px; height: 64px; margin: 0 auto 1rem;
	background: var(--fl-bg-white); border: 1px solid var(--fl-border);
	border-radius: 50%; display: flex; align-items: center;
	justify-content: center; color: var(--fl-text-light);
	transition: all 0.3s ease; cursor: default;
}
.fl-audience-item:hover .fl-audience-circle {
	border-color: var(--fl-primary); color: var(--fl-primary);
}

/* EUROPA FIRESUPPLY */
.fl-europa {
	padding: 6rem 0; background: #212529; color: var(--fl-bg-white);
	position: relative; overflow: hidden;
}
.fl-europa::before {
	content: ""; position: absolute; inset: 0; opacity: 0.1;
	background-image: radial-gradient(var(--fl-bg-white) 1px, transparent 1px);
	background-size: 30px 30px;
}
.fl-map-container {
	position: relative; height: 400px;
	display: flex; align-items: center; justify-content: center;
}
.fl-map-svg {
	width: 100%; height: 100%; fill: #4b5563; opacity: 0.3;
}
.fl-hotspot {
	position: absolute; width: 12px; height: 12px;
	animation: fl-ping 2s infinite;
}
.fl-hotspot::before {
	content: ""; position: absolute; inset: 0;
	background: var(--fl-primary); border-radius: 50%;
	animation: fl-ping-ring 2s infinite;
}
.fl-hotspot::after {
	content: ""; position: absolute; inset: 0;
	background: var(--fl-primary); border-radius: 50%;
}
.fl-feature-item {
	display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem;
}
@keyframes fl-ping-ring {
	0% { transform: scale(1); opacity: 0.75; }
	100% { transform: scale(2); opacity: 0; }
}

/* TABLA COMPARATIVA FIRESUPPLY */
.fl-comparison { padding: 6rem 0; background: var(--fl-bg-white); }
.fl-table-container {
	overflow: hidden; border: 1px solid var(--fl-border);
	border-radius: 0.75rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.fl-table {
	width: 100%; border-collapse: collapse;
}
.fl-table thead {
	background: var(--fl-bg-gray); border-bottom: 1px solid var(--fl-border);
}
.fl-table th {
	padding: 1.5rem 1.25rem; text-align: left;
	font-size: 0.875rem; font-weight: 500; color: var(--fl-text-muted);
}
.fl-table th:first-child { width: 33.33%; }
.fl-table th:nth-child(2) {
	width: 33.33%; text-align: center;
	border-right: 1px solid var(--fl-border);
	font-weight: 700; color: var(--fl-text-dark);
}
.fl-table th:last-child {
	width: 33.33%; text-align: center; font-weight: 700;
	color: var(--fl-primary); background: var(--fl-primary-rgba-5);
}
.fl-table tbody tr { border-bottom: 1px solid #f3f4f6; }
.fl-table tbody tr:last-child { border-bottom: none; }
.fl-table td { padding: 1.5rem 1.25rem; font-size: 0.875rem; }
.fl-table td:first-child { font-weight: 600; color: var(--fl-text-dark); }
.fl-table td:nth-child(2) {
	text-align: center; color: var(--fl-text-muted);
	border-right: 1px solid #f3f4f6;
}
.fl-table td:last-child {
	text-align: center; font-weight: 700; color: var(--fl-text-dark);
	background: rgba(255, 107, 53, 0.03);
}

/* CASO DE USO TIMELINE FIRESUPPLY */
.fl-case { padding: 6rem 0; background: var(--fl-bg-light); }
.fl-timeline-card {
	background: var(--fl-bg-white); border: 1px solid var(--fl-border-light);
	border-radius: 0.75rem; padding: 2rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); position: relative;
}
.fl-timeline-dots {
	display: flex; align-items: center; justify-content: space-between;
	position: relative; z-index: 10;
}
.fl-timeline-line {
	flex: 1; height: 2px; background: var(--fl-border); margin: 0 0.5rem;
}
.fl-timeline-dot {
	width: 12px; height: 12px; background: #d1d5db;
	border-radius: 50%; margin: 0 auto 0.5rem;
}
.fl-timeline-dot-active { background: var(--fl-primary); }
.fl-timeline-item { text-align: center; }

/* MÉTRICAS FIRESUPPLY */
.fl-metrics {
	padding: 0 0 6rem 0; background: var(--fl-bg-light);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.fl-metric { text-align: center; }
.fl-metric-number {
	font-size: 5rem; font-weight: 900; color: var(--fl-primary);
	line-height: 1; margin-bottom: 0.5rem;
}

@media (max-width: 767px) {
	.fl-metric-number { font-size: 3.5rem; }
}

/* CTA FINAL FIRESUPPLY */
.fl-cta {
	padding: 6rem 0 3rem; background: var(--fl-bg-white);
	border-top: 1px solid var(--fl-border-light);
}
.fl-cta-btn {
	background: var(--fl-primary); color: var(--fl-bg-white);
	padding: 1rem 2rem; font-size: 1.125rem; border-radius: 0.5rem;
	font-weight: 700; text-decoration: none;
	display: inline-flex; align-items: center; justify-content: center;
	transition: all 0.3s ease;
	box-shadow: 0 8px 24px var(--fl-primary-rgba-2); border: none;
}
.fl-cta-btn:hover {
	background: var(--fl-primary-hover); transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(255, 107, 53, 0.3); color: var(--fl-bg-white);
}